首页

源码搜藏网

首页 > 网页特效 > 图片代码 >

可自动可手动的四图横向滚动效果

创建时间:2013-08-27 11:36  

可自动可手动的四图横向滚动效果
可自动可手动的四图横向滚动效果
效果预览 立即下载

可自动可手动的四图横向滚动效果

使用方法:

1.引用样式文件css/lrtk.css

2.引用jquery的库文件js/jquery.js

3.引用效果的具体js代码文件js/lrtk.js复制至html文件中。

4.将class为picbox的div的内容复制到您的html文件。

5.如果页面格式为utf-8,请将lrtk.js的格式改为utf-8。

6.当前是自动滚动效果,如果不需要,可在js中相应标注的地方修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为四图横向滚动效果(可自动可手动),属于站长常用代码,更多图片特效代码请访问源码搜藏JS代码频道。" />
<title>四图横向滚动效果(可自动可手动)_源码搜藏</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>


<body><br />
<!-- 代码开始 -->
<div class="box">
<div class="picbox">
<ul class="piclist mainlist">
<li><a href="http://www.codesocang.com/" target="_blank"><img src="images/1.jpg" width="220" height="105" /></a></li>
<li><a href="http://www.codesocang.com/" target="_blank"><img src="images/2.jpg" /></a></li>
<li><a href="http://www.codesocang.com/" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="http://www.codesocang.com/" target="_blank"><img src="images/4.jpg" /></a></li>
<li><a href="http://www.codesocang.com/" target="_blank"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.codesocang.com/" target="_blank"><img src="images/2.jpg" /></a></li>
<li><a href="http://www.codesocang.com/" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="http://www.codesocang.com/" target="_blank"><img src="images/4.jpg" /></a></li>
</ul>
        <ul class="piclist swaplist"></ul>
</div>
<div class="og_prev"></div>
<div class="og_next"></div>
</div>
<!-- 代码结束 -->


<style type="text/css">
.footer p{font:normal 12px/2em '微软雅黑';text-align:center;}
</style>
<div class="footer" style="margin:50px 0;">
<p>来源:<a href="http://www.codesocang.com/" target="_blank">极客公园</a> 代码整理:<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a> 感谢:<a href="http://www.iseedy.com/" target="_blank">爱看电影网</a></p>
<p>*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
<p></p>
<p><p>四图横向滚动效果(可自动可手动),此效果兼容所有主流浏览器,包括IE6哦~,源码搜藏推荐下载!</p><p><br /></p><p>使用方法:</p><p>1.引用样式文件css/lrtk.css<br /></p><p>2.引用jquery的库文件js/jquery.js<br /></p><p>3.引用效果的具体js代码文件js/lrtk.js复制至html文件中。<br /></p><p>4.将class为picbox的div的内容复制到您的html文件。<br /></p><p>5.如果页面格式为utf-8,请将lrtk.js的格式改为utf-8。<br /></p><p>6.当前是自动滚动效果,如果不需要,可在js中相应标注的地方修改。</p></p>
<p></p>
</div>


</body>
</html>


上一篇:jQuery写的漂亮的单张放大图片展示效果
下一篇:包含四种效果的3D缩略图jquery特效

相关内容

热门推荐