JQuery图片轮播滚动效果(网页效果--每日一更)

　　今天，带来的是一个图片的轮播滚动效果！

　　先来看一下效果展示：亲，请点击这里

　　原理很简单，设置一个定时器，使图片列表在每隔一段时间后滚动一次。而循环效果，就是在每一滚动的时候，将第一张图片放到最后一张的后面，详细请看代码。

 

　　HTML结构代码如下：

 1     <div class="content">

 2         <div class="box">

 3  /*滚动的盒子*/  4             <ul id="scroll_box">

 5                 <li><img src="../Images/1.jpg" alt=""/></li>

 6                 <li><img src="../Images/2.jpg" alt=""/></li>

 7                 <li><img src="../Images/3.jpg" alt=""/></li>

 8                 <li><img src="../Images/4.jpg" alt=""/></li>

 9                 <li><img src="../Images/5.jpg" alt=""/></li>

10                 <li><img src="../Images/6.jpg" alt=""/></li>

11                 <li><img src="../Images/7.jpg" alt=""/></li>

12                 <li><img src="../Images/8.jpg" alt=""/></li>

13                 <li><img src="../Images/9.jpg" alt=""/></li>

14                 <li><img src="../Images/10.jpg" alt=""/></li>

15             </ul>

16         </div>

17     </div>

 

　　样式代码：

1  <style type="text/css"> 2  *{margin:0px;padding:0px;}

3  .content{width:800px;margin:30px auto;height:200px;}

4  .box{width:800px;overflow:hidden;height:200px;}

5  #scroll_box{list-style:none;}

6  #scroll_box li{width:200px;float:left;height:200px;}

7  #scroll_box li img{width:200px;height:200px;}

8  </style>

 

　　JS脚本代码：

 1     <script type="text/javascript">

 2         var length = $("#scroll_box li").length;  3         var liWidth = $("#scroll_box li").outerWidth(true);  4         var boxWidth = $(".box").outerWidth(true);  5         var showLength = Math.ceil(boxWidth / liWidth); //显示图片个数

 6         var speed = 1000;   //滚动速度

 7         var time = 3000;    //滚动间隔

 8         var scrollIndex = 1;    //每次滚动的图片数量

 9         $("#scroll_box").css("width",length * liWidth);     //设置滚动盒子宽度

10         function scroll(){ 11             $("#scroll_box").stop().animate({"margin-left":"-"+scrollIndex*liWidth+"px"},speed,function(){ 12                 $("#scroll_box").css("margin-left",0); 13                 for(var i =0;i < scrollIndex;i++){ 14                     //将第一张图片放到最后一张图片后面

15                     $("#scroll_box").find("li").last().after($("#scroll_box").find("li").first()); 16  } 17  }); 18  } 19  setInterval(scroll,time); 20     </script>

 

　　其中需要注意的是，在脚本中，我们需要一个for循环来控制图片的换位操作。这里的循环次数取决于我们每次滚动图片的数量。读者可以亲自尝试。

 

　　享受代码，享受生活。网页效果，每日一更。