jq無縫輪播圖
阿新 • • 發佈：2018-11-10
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- css中只有樣式 --> <style type="text/css"> *,ul,a{ margin:0; padding:0; border:0; list-style:none; text-decoration:none; } #swiper{ width:469px; height:159px; margin:0 auto; border:1px solid #c0a599; margin-top:30px; position:relative; overflow:hidden; background: deepskyblue; } #list{ position:absolute; height:400px; } .li{ width:469px; height:259px; float:left; } .li a img{ width: 100%;height: 100%; } </style> <!-- 這裡需要匯入jQuery包,不然程式無法執行 --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> //用到的是jQuery程式碼,不介紹程式碼單個意思 $(function(){ //獲取li的個數 var len=$(".li").length; //把所有li的寬度算好,賦值給ul當寬度 $("#list").width($(".li").eq(0).width()*len);//n個li的寬度 //id是為了後面的計時器暫停設定的 var id; //index用來統計滾動次數 var index=0; //啟動計時器 id=setInterval(start,3000); //給ul(#banner)新增hover選擇器事件 $("#list").hover(function(){ //滑鼠進入的時候暫停 clearInterval(id); },function(){ //滑鼠離開的時候開始 id=setInterval(start,3000); }); //計時器中執行的程式碼塊 function start(){ //執行的時候次數++ index++; //用animate設定ul的left屬性,與左邊的距離 $("#list").animate({'left':-$(".li").eq(0).width()*(index%len)}); //實現無縫輪播的關鍵地方 //判斷index%len的值index%len=0的時候表示第一張,那麼len-1表示最後一張, //最後一張與第一張一模一樣,所有直接修改left屬性 無縫輪播需要第一張與最後一張是一樣的圖片(重要) //console.log(index,len,index%len,len-1) if(index%len==(len-1)){ $("#list").animate({'left':0},0); //同時給index+1跳過第一張圖的再次載入 index++; } //實際的載入情況就是第一張,第二張,第三張,第四張,第五張(瞬間改變圖片為第一張的,是一模一樣的替換,不是滾動,看不出來,所以稱之為無縫輪播),第二張... } }); </script> </head> <body> <div id="swiper"> <ul id="list"> <li class="li"><a href="#"><img alt="" src="img/QQ圖片20181025164501.png"></a></li> <li class="li"><a href="#"><img alt="" src="img/glyphicons-halflings.png"></a></li> <li class="li"><a href="#"><img alt="" src="img/glyphicons-halflings-white.png"></a></li> <li class="li"><a href="#"><img alt="" src="img/glyphicons-halflings.png"></a></li> <li class="li"><a href="#"><img alt="" src="img/QQ圖片20181025164501.png"></a></li> </ul> </div> </body> </html>