jQuery實現的無縫輪播圖
阿新 • • 發佈：2019-01-29
其實只要原生js學好了，能夠實現輪播圖無縫切換，再用jQuery寫，感覺簡單多了，嗯、為了熟悉jQuery的用法，還是動手把它實現了，廢話不多說，看程式碼吧，實現的過程都註釋在程式碼中了，嗯、要養成註釋的好習慣
個人認為，無縫輪播，最主要解決的就是當圖片在第一張（或最後一張），怎樣點選上一張（或下一張）讓其去到（最後一張）（或第一張）。
我這裡的解決辦法就是，將第一張克隆後新增到ul的最後，將最後一張克隆後新增的ul的最前面，然後當圖片移動到原來的第一張圖片的時候，讓ul的left值為-width*len,同理，當圖片移動到原來的最後一張的時候，讓ul的left值為-width，嗯完美解決，如果看原理有點難懂，那就看程式碼吧，畢竟一例勝前言嘛
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖</title> <style> *{padding:0; margin:0;} li{list-style:none;} a{text-decoration:none;} #wrap{ width:600px; height:300px; border:1px solid #e15671; margin:auto; position:relative; } #box{ margin:50px 100px; width:400px; height:200px; position:relative; background:red;overflow:hidden; } #wrap .ul1{width:1600px; height:200px; position:absolute; left:0; top:0; } #wrap .ul1 li{float:left; width:400px; height:200px;} #wrap .ul1 img{width:100%; height:100%;} #wrap .sp{position:absolute; top:95px; display:block; width:30px; height:60px;text-align:center; line-height:60px; color:#fff; background-color:rgba(0,0,0,.6);} #wrap .sp1{left:20px;} #wrap .sp2{right:20px;} #wrap .p{position:absolute; bottom:0;width:100%; text-align:center; height:50px; line-height:50px;} #wrap .p a{display:inline-block; width:30px; height:2px; margin-left:10px; background-color:#e15671;} #wrap .p .active{background-color:#000;} </style> </head> <body> <div id="wrap"> <div id="box"> <ul class="ul1"> <li><img src="../imgs/1.jpg"/></li> <li><img src="../imgs/2.jpg"/></li> <li><img src="../imgs/3.jpg"/></li> <li><img src="../imgs/4.jpg"/></li> </ul> </div> <span class="sp sp1"><</span> <span class="sp sp2">></span> <p class="p"><a class="active" href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></p> </div> <script src="jquery-1.11.1.js"></script> <script> $(function(){ var first = $('.ul1').find('li').first(); var last = $('.ul1').find('li').last(); var len = $('li').size(); var i=0; var oBtn = true; var width = $('li').width();//獲取一個li的寬度 //克隆第一張和最後一個圖片，方便後面的無縫輪播的實現 $('.ul1').prepend(last.clone()); $('.ul1').append(first.clone()); // 動態計算ul的寬度 $('.ul1').width($('li').size()*width); //讓ul一開始的寬度為-width $('.ul1').css('left',-width); //單擊下一個按鈕，讓ul向右移動 $('.sp2').click(function(){ if(oBtn){ next(); } }); //單擊上一個按鈕，ul整體向左移動 $('.sp1').click(function(){ if(oBtn){ prev(); } }); $('p').find('a').click(function(){ i = $(this).index(); $('.ul1').animate({ left:-width*(i+1) },1000,function(){ $('.p').find('a').attr('class',''); $('.p').find('a').eq(i).attr('class','active'); }); }); function prev(){ oBtn = false; $('.ul1').animate({ left:'-='+width },1000,function(){ i++; if(i==len){ $('.ul1').css('left',-width); i=0; } $('.p').find('a').attr('class',''); $('.p').find('a').eq(i).attr('class','active'); oBtn = true; }); } function next(){ oBtn = false; $('.ul1').animate({ left:'+='+width },1000,function(){ if(i==0){ i = len; $('.ul1').css('left',-width*len); } i--; $('.p').find('a').attr('class',''); $('.p').find('a').eq(i).attr('class','active'); oBtn = true; }); } }); </script> </body> </html>