圖片輪播/無縫滾動的原理

輪播就是經過定時器控制圖片的盒子的邊距進行變化，從而達到看上去輪播的現象。經常使用來網站首頁輪播圖，商品展現等不少種狀況。

無縫輪播就是看起來是一個方向不停地輪換展現，實現該效果有兩個思路，一個就是在自己圖片的後面追加一組同樣的圖片，避免出現空白，從而達到無縫的假象；另外一種思路就是每次都把第一張圖片放到最後，邊距清零，或者定位清零，每執行一次就清空一次，從而達到效果的假象。下面咱們一一介紹。

若是佈局不會就看上一篇筆記，圖片輪播就是當圖片到最後一張的時候，把圖片的box調整到最初的位置，讓邊距或者定位爲0。代碼以下：

var index = 0; var tick = setInterval(function () { index++; if (index < 10) {//10表明圖片的張數 $("ul").animate({"margin-left": -210 * index}, 1000);//210每一個圖片的寬度 } else { index = 0; $("ul").animate({"margin-left": -210 * index}, 1);//1毫秒完成動畫 } }, 1);//1毫秒執行一次

 

效果是勻速輪播，這種方法爲了顯示輪播避免空白出現須要複製一組圖片追加到ul並且最後會閃一下，最後一張圖片沒有動畫效果，不推薦。

第二種是勻速輪播，效果是一張走完另外一張在執行動畫，避免了後期鼠標懸浮出現半個圖片的問題。缺點，頻繁調用服務器資源。

function scroll() { $("ul").animate({"margin-left": "-210px"}, 1000,function () { $(" ul li:eq(0)").appendTo($("ul")); $("ul").css({"margin-left": 0}); }); } setInterval(function(){scroll()}, 500);// setInterval(scroll, 500);//這兩種寫法均可以

 

效果是無縫輪播，這個辦法比較易於理解，可是代碼過於臃腫，不簡潔，不推薦使用。經過兩個按鈕，兩個計時器控制左右邊距進行控制左右方向的輪播。

勻速滾動一 能夠設置一個函數讓它邊距每多久執行一次函數 var i = 0; function autoLeft() { i -= 2; $("ul").css({"margin-left": i}); if (i < -2100) { i = 0; $("ul").css({"margin-left": 0}); } } function autoRight() { i += 2; $("ul").css({"margin-left": i}); if (i > 0) { i = -2100; $("ul").css({"margin-left": -2100}); } } var tickL = setInterval(autoLeft, 30); var tickR = setInterval(autoRight, 30); clearInterval(tickR); $("#leftbtn").click(function () { clearInterval(tickL); clearInterval(tickR); tickL = setInterval(autoLeft, 30); }); $("#rightbtn").click(function () { clearInterval(tickL); clearInterval(tickR); tickR = setInterval(autoRight, 30); });

 

效果無縫勻速滾動，推薦使用。經過控制變量的正負值從而達到控制輪播的方向。難點在於判斷，經過兩個變量，一個控制累加，一個控制邊距，這樣就更利於判斷，邊距分開寫不要寫入函數體內，分開執行。更易於理解。

var i = -2, j = 0; function auto() { $("ul").css({"margin-left": j += i}); if (j < -2100) { j = 0; $("ul").css({"margin-left": j}); } else if (j > 0) { j = -2100; $("ul").css({"margin-left": j}); } ; } var tick; function autoPlay() { clearInterval(tick); tick = setInterval(function () { auto(); }, 20); }; autoPlay(); $("#leftbtn").click(function () { i = -2; }); $("#rightbtn").click(function () { i = 2; }); $("div").hover(function(){ clearInterval(tick); },function(){ clearInterval(tick); autoPlay(); });