特效介绍
音乐网站首页图片左右滚动的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>别的参数都不动,只要更改图片路径即可。