音乐网站首页图片左右滚动的jquery轮播代码
- 作者：网页模板
- 大小：0.277MB
- 点击次数：
- 发布时间：2014-03-21 13:35
特效介绍
音乐网站首页图片左右滚动的jquery轮播代码。完美兼容IE6，并且可以增加轮播图片的数量，如果您的网站需要做轮播，模板网极力推荐此款滚动特效。
使用方法
使用方法：1、在head区引入下面的代码：
<link rel="stylesheet" type="text/css" href="images/5imoban.net.css">
<script type="text/javascript" src="images/jscript_jquery-1.4.min.js"></script>
<script type="text/javascript" src="images/jscript_loopedslider.js"></script>
<script type="text/javascript">
preloadImages([
'images/prev-act.png',
'images/next-act.png',
</script>
<script type="text/javascript" charset="utf-8">
$(function(){
// Option set as a global variable
$.fn.loopedSlider.defaults.addPagination = true;
$('#loopedSlider').loopedSlider();
});
</script>
2、在body区引入下面的代码：<div style=" width:950px; height:435px; margin:0px auto;">
<div id="loopedSlider">
<div class="container">
<div class="slides" style="width: 2850px; left: -950px; ">
<div id="bannerOne" style="position: absolute; left: 0px; display: block; "><a href="http://www.5imoban.net"><img src="images/banner1.png" alt="模板网" title="模板网" width="950" height="435"></a></div>
<div id="bannerTwo" style="position: absolute; left: 950px; display: block; "><a href="http://www.5imoban.net"><img src="images/banner2.png" alt="免费网站模板" title="免费网站模板" width="950" height="435"></a></div>
<div id="bannerThree" style="left: 1900px; display: block; position: absolute; "><a href="http://www.5imoban.net"><img src="images/banner3.png" alt="网站模板" title="网站模板" width="950" height="435"></a></div>
</div>
<a href="#" class="previous"> </a>
<a href="#" class="next"> </a>
<ul class="pagination">
<li class=""><a rel="1" href="#">1</a></li>
<li class="active"><a rel="2" href="#">2</a></li>
<li class=""><a rel="3" href="#">3</a></li>
</ul>
</div>
</div>
注：如果想增加图片，直接复制类似下面的代码，在<a href="#" class="previous"> </a>前面追加即可：<div id="bannerThree" style="left: 1900px; display: block; position: absolute; ">
<a href="http://www.5imoban.net"><img src="images/banner3.png" alt="网站模板" title="网站模板" width="950" height="435"></a></div>
</div>
别的参数都不动，只要更改图片路径即可。- 本文标签：
- 页图片左右滚动代码,jquery轮播代码
