什么是連續滾動幻燈片？打開一些網站的首頁，你會發現有一塊這樣的區域：一張圖片，隔一段時間滑動切換下一張；同時，圖片兩端各有一個小按鈕，供你手動點選下一張；底部有一排小圓圈，供你選定特定的某幀圖片。這就是“連續滾動幻燈片”（我自己的叫法，當然它也可能叫焦點輪播圖，輪播圖等等等等），本文單講手動連續切換，不涉及自動播放和底部小圓圈。
實現這種幻燈片有幾個難點：
1.圖片放置：你需要把所有圖片放入一個div（這里就把它的class叫做pics吧）中，再把pics放入一個更大的div（就命名為container吧）中，然后把container的寬度設為一張圖片的寬度，再給它設置overflow:hidden。然后把pics的寬度設置為所有圖片的總寬度。這樣方便后面從左向右切換。如下圖所示：
2.圖片輪播。基本要領是，當點擊next按鈕的時候，將pics容器的left屬性定義到下一張圖片的位置，從而移動到下一張圖片，例如，假設當前是第二張圖片，那么點擊按鈕的時候應該把pics的left值設為-640*2 + 'px'（因為我這里用的圖片都是-640px的）（當然這里還要加入一個計數器，當點到最后一張圖片的時候，計數器置0）。
如果你不打算加入平滑移動的動畫，那到這里就可以結束了。但是如果你打算加入動畫，這里就有一個問題：當移動到最后一張圖片的時候，繼續點擊，圖片組會由最后一張長途跋涉回滾到第一張，這樣用戶體驗很不好。理想的狀態應當是，當你滾動到最后一張繼續滾動的時候，應當像之前滾向下一張一樣無縫滾動。不知道我說的清不清楚，大致就是：像手機屏幕一樣，當你滑動到最后一屏的時候接着滑動，會直接滑回一屏，也就是循環滑動。
本文的主要目的就是說明這種循環滑動的實現方法。
它的基本原理是，你要在正常的圖片組的最后面加入一張緩沖圖片（src和第一張圖片相同），當幻燈片正處於最后一張圖片的時候，點擊滑動按鈕，平滑滑動到這張緩沖圖片，當用戶下一次點擊的時候，再悄悄地把圖片置換回真正的第一張圖片，然后再執行動畫。由於置換回第一張圖片的時候是立即執行的，所以用戶不會發現圖片已經回到了真正的第一張，這就實現了循環滑動。下面請看具體代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無限滾動</title> <style type="text/css"> .main{position:relative;height:360px;width:640px;overflow: hidden;} .pics{position:absolute;top:0;left:0;height:360px;width:3200px;} .pics img{float:left;height:100%;width:20%;} </style> </head> <body> <!-- 為了行文簡單，我這里只添加了一個next按鈕，如果你還要添加prev按鈕，那應該在 第一張圖片之前也加入一張緩沖圖片，src和最后一張圖片相同。 --> <div class="main"> <div class="pics"> <img class="mainflow" src="img/0.jpg" alt="" /> <img class="mainflow" src="img/1.jpg" alt="" /> <img class="mainflow" src="img/2.jpg" alt="" /> <img class="mainflow" src="img/3.jpg" alt="" /> <!--↑↑↑真正的最后一張--> <img class="mainflow" src="img/0.jpg" alt="" /> <!--↑↑↑緩沖圖--> </div> </div> <div> <div class="btn"><button>NEXT</button></div> </div> <script type="text/javascript"> var btn = document.getElementsByClassName("btn")[0]; var pics = document.getElementsByClassName("pics")[0]; var mainflow = document.getElementsByClassName("mainflow"); var cnt = 0;//計數器 //主函數 btn.onclick = function(){ if(-cnt == mainflow.length - 1){ //如果達到最后一張圖片，就要特殊處理。 //當按下NEXT按鈕時，應該先把圖片瞬間從緩沖圖切換到真正的 //第一張，然后再執行動畫。 pics.style.left = "0px"; cnt = 0; //這里我一開始用CSS3自帶的transition動畫，結果發現它太不好控制了， //掙扎了很久，自己寫了動畫。 animate(pics,(--cnt)*640); }else{ //一般情況，直接執行切換動畫。 animate(pics,(--cnt)*640); } } //動畫函數開始，target代表要對誰進行滾動，offset代表滾動的距離， //也就是一張圖片的寬度。 function animate(target,offset){ //先用offsetLeft儲存好target.style.left，因為后面要用到它， //style.left本身只能讀取內聯樣式style="xxxx"里面的樣式，如果沒有內聯樣式 //就直接讀取，只會返回空值。 target.style.left = target.offsetLeft; //這里是主要部分 function go(){ //每隔15毫秒，向左移動16個像素。這兩個值要多試幾次，不然動畫會一卡一卡 target.style.left = (parseInt(target.style.left) - 16) +"px"; timer = setTimeout(go,15); //如果到目的地了就停止滾動 if(parseInt(target.style.left) == offset) clearTimeout(timer); } //別忘了執行一下它。。 go(); } </script> </body> </html>
參考資料：
1.慕課網課程，焦點輪播圖特效。http://www.imooc.com/learn/18