首页 > 特效插件 > 滚动轮播 >  音乐网站首页图片左右滚动的jquery轮播代码正文

音乐网站首页图片左右滚动的jquery轮播代码

特效介绍
音乐网站首页图片左右滚动的jquery轮播代码
音乐网站首页图片左右滚动的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">&nbsp;</a>
<a href="#" class="next">&nbsp;</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">&nbsp;</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>
别的参数都不动,只要更改图片路径即可。