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循環來控制圖片的換位操做。這裏的循環次數取決於咱們每次滾動圖片的數量。讀者能夠親自嘗試。

 

　　享受代碼，享受生活。網頁效果，每日一更。