輪播， 無論是文字輪播還是圖片輪播， 他們的原理是一樣的， 都是通過計時器執行迴圈展示和影藏。
一、手動輪播
（1）原理
一系列的大小相等的圖片平鋪， 利用CSS佈局只顯示一張圖片， 其餘隱藏。 通過計算偏移量利用計時器實現自動播放， 或通過手動點擊事件切換圖片。
（2）實現
如何利用css實現佈局顯示一張圖片？主要的屬性是over-follow:hidden。 首先給容器一個固定的長和寬， 然後設置over-flow:hidden。
1、html結構
首先父容器container存放所有內容， 子容器list存在圖片。 子容器buttons存放按鈕小圓點。
優化， 無縫滾動。
當你從最後一張圖切換回第一張圖時， 有很大空白， 利用兩張輔助圖來填補這個空白。
這裡補充下無縫滾動， 直接看代碼， 複製最後一張圖片放置第一張圖片前， 同時複製第一張圖片放置最後一張圖片的後面。 並且， 將第一張圖片輔助圖（實際上是實際顯示的第5張圖片隱藏起來， 故設置style="left: -600px;"）
推薦下我的web前端學習群：121404239，
2、css樣式
1、對盒子模型， 文檔流的理解， 絕對定位問題。
2、注意list的overflow:hidden;只顯示視窗的一張圖片， 把左右兩邊的都隱藏起來。
3、確保buttons中每個span所在層置頂， 將其設置為最頂端。
3、JS實現
首先我們先實現出手動點擊左右兩個箭頭切換圖片的效果：
效果如下圖所示
運行後我們會發現， 一直點擊右箭頭 ， 會出現空白， 而且， 不能回到第一張圖片。 要點擊左箭頭才能回到第一張圖片。
原因是我們利用偏移量left來獲取圖片， 當看到left值小於3600時， 因為沒有第8張圖片就出現空白， 所以這裡我們需要對偏移量做一個判斷。
if(newLeft<-3000){ list.style.left = -600 + 'px'; } if(newLeft>-600){ list.style.left = -3000 + 'px'; }加了這個判斷就是說， 在即時的left值在小於-3000的時候， 通過操作dom元素直接把left值給到-600， 回到初始化的狀態。
但是輪播有自動輪播和手動輪播。 上面基本實現的是手動點擊進行輪播（手動輪播）。
二、自動輪播
要實現自動， 必須有計時器進行計時。
對於計時器， 有必要說明一下setInterval()跟setTimeout的區別了。
簡單來說， setInterval()執行多次， setTimeout()只執行一次。
所以自動輪播需要我們每隔一段時間執行一次， 選擇setInterval()函數。
完美實現了自動輪播
但是，當我們想仔細看某一張圖片時候，要把圖片停住，我們清楚計時器就可以
三、手動可以干預輪播
我想仔細看某一張照片時候，要圖片停住，需要用到window.clearInterval 這個方法。
這裡，我們需要對其DOM操作，需要獲取整個輪播圖區域，滑鼠進入到容器區域就清空計時器。
效果，如下圖所示：
一個滑鼠放上輪播暫停的實現就完美實現了。
現在回顧一下，的確很簡單，不是很難，並不是必須要用外掛程式實現，原生的js也可以實現，你可以優化一下封裝成自己的輪播外掛程式。
（1）容器的css佈局。
（2）每一次輪播通過偏移量left實現，手動輪播的按鈕綁定每一次偏移量增加還是減少一張照片寬度的偏移量。
（3）自動輪播，通過setInterval()方法實現計時器，執行下一張的點擊函數
（4）滑鼠控制輪播的暫停和繼續。通過onmouseover為暫停，onmouseout為繼續。
四、小點也隨著圖片進行輪播
首先要能拿到有多少個小點的陣列，然後每一次的下一步的時候判斷一下當前的小圓點的標誌位元。
（1）當標誌位元大於陣列的長度時候，需要把標誌位元賦值為初始值
（2）每執行一次下一步，標誌位元temp+1，同時將圓點的上一個樣式清除，下一個顯示選中樣式。
最後效果如下圖所示：
五、小點可以點擊到對應的圖片上
突然發現圖片下邊還有一堆小點，需要給增加點擊事件，點擊哪一個點，就到哪一張圖片上。
要大功告成了，但是發現控制台會發現列印出來的永遠的是i=5。
“對javascript來說，由for語句創建的變數i即使在for迴圈執行結束後，也依舊會存在於迴圈外部的執行環境中。”
就是說，js沒有塊級作用域這東西，（可能我C寫多了，混淆了）。在第一次迴圈（從 i=0 到 4 這一過程）結束後，最後的 i 獲取到的為 buttons.length 的值被
保存在for迴圈之外，最後滑鼠點擊任何一個小圓點時，自然訪問的一直是 i=5 了。
推薦下我的web前端學習群：121404239，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。
使用立即函數
作者 | saucxs
地址 | http://www.cnblogs.com/chengxs/p/8109993.html
選擇setInterval()函數。
完美實現了自動輪播
但是，當我們想仔細看某一張圖片時候，要把圖片停住，我們清楚計時器就可以
三、手動可以干預輪播
我想仔細看某一張照片時候，要圖片停住，需要用到window.clearInterval 這個方法。
這裡，我們需要對其DOM操作，需要獲取整個輪播圖區域，滑鼠進入到容器區域就清空計時器。
效果，如下圖所示：
一個滑鼠放上輪播暫停的實現就完美實現了。
現在回顧一下，的確很簡單，不是很難，並不是必須要用外掛程式實現，原生的js也可以實現，你可以優化一下封裝成自己的輪播外掛程式。
（1）容器的css佈局。
（2）每一次輪播通過偏移量left實現，手動輪播的按鈕綁定每一次偏移量增加還是減少一張照片寬度的偏移量。
（3）自動輪播，通過setInterval()方法實現計時器，執行下一張的點擊函數
（4）滑鼠控制輪播的暫停和繼續。通過onmouseover為暫停，onmouseout為繼續。
四、小點也隨著圖片進行輪播
首先要能拿到有多少個小點的陣列，然後每一次的下一步的時候判斷一下當前的小圓點的標誌位元。
（1）當標誌位元大於陣列的長度時候，需要把標誌位元賦值為初始值
（2）每執行一次下一步，標誌位元temp+1，同時將圓點的上一個樣式清除，下一個顯示選中樣式。
最後效果如下圖所示：
五、小點可以點擊到對應的圖片上
突然發現圖片下邊還有一堆小點，需要給增加點擊事件，點擊哪一個點，就到哪一張圖片上。
要大功告成了，但是發現控制台會發現列印出來的永遠的是i=5。
“對javascript來說，由for語句創建的變數i即使在for迴圈執行結束後，也依舊會存在於迴圈外部的執行環境中。”
就是說，js沒有塊級作用域這東西，（可能我C寫多了，混淆了）。在第一次迴圈（從 i=0 到 4 這一過程）結束後，最後的 i 獲取到的為 buttons.length 的值被
保存在for迴圈之外，最後滑鼠點擊任何一個小圓點時，自然訪問的一直是 i=5 了。
推薦下我的web前端學習群：121404239，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。
使用立即函數
作者 | saucxs
地址 | http://www.cnblogs.com/chengxs/p/8109993.html