首先，在解析輪播圖的實現原理之前，我們得知道什麼是輪播圖。

顧名思義，輪播圖就是在網頁中能夠迴圈播放並且可以手動切換的圖片。輪播圖一般作為banner出現在網頁頭部靠下的位置，用以向用戶展示一些比較重要或熱門的東西。

輪播圖的播放效果有很多種，今天我們只取其中一種進行原理解析，因為雖然效果略有不同，但是實現機制卻也相差無幾。

總體思路是：

1．html佈局上：在最外層套一個盒子，暫且稱它為box，寬度為一張圖片的寬度，設定相對定位和溢位隱藏，為了方便，box裡面放一個ul，設定絕對定位，ul裡面便是一個li放一張圖片，然後讓li浮動，再給box定位一個左右按鈕和一個用來放控制圖片的小圓點的ol。

2．css設定樣式：定義一個active的class來控制被選中的小圓點的樣式

3．js控制輪播：

a準備工作：引入一個運動的外掛，獲取需要的box、ul、li、ol、按鈕，獲取圖片的張數和寬度，然後克隆第一張圖片插入ul裡面，給ul設定寬度為(圖片數量+1x圖片寬度),

定義一個空陣列arr儲存小圓點，index存當前圖片，btnIndex存小圓點下標，標誌位flag判斷圖片是否處於播放狀態。

b製作輪播：用for迴圈建立與圖片數量相等的小圓點，給它繫結點選事件，並給第一個小圓點加上active的class，將建立的小圓點插入定義的陣列，將小圓點從記憶體裡拿出來放到ol裡面。

點選小圓點控制圖片切換：點選時先利用flag判斷當前圖片是否處於播放狀態，如果未播放就設為播放狀態，然後將上一張圖片的active清除並給當前圖片加上active，相應的index和btnIndex也得變為當前的，用運動外掛控制ul進行定位，動畫結束時將flag變為未播放狀態。

點擊向右切換：首先同樣判斷圖片的播放狀態，清除上一張圖片對應的小圓點的樣式，並讓圖片和小圓點對應的index和btnIndex分別+1，然後判斷index等於圖片數量和大於圖片數量，如果等於，就讓btnIndex = 0，如果大於就讓index=btnIndex-=1

並讓ul的left為0，然後給當前圖片對應的小圓點新增active，並用運動外掛控制ul進行定位，動畫結束時將flag變為未播放狀態。

點擊向左切換：同樣判斷圖片的播放狀態，清除上一張圖片對應的小圓點的樣式，並讓圖片和小圓點對應的index和btnIndex分別-1，然後判斷

Index<0或者btnIndex<0,如果其中一個小於0，就將ul的left賦值為負的(圖片數量x圖片寬度)，並讓index和btnIndex都等於(圖片數量-1), 然後給當前圖片對應的小圓點新增active，並用運動外掛控制ul進行定位，動畫結束時將flag變為未播放狀態。

定時器控制圖片自動播放：建立一個定時器timer，當滑鼠mouseenter時，在定時器裡面呼叫向右切換的函式，當滑鼠mouseleave時，清除該定時器。

至此，一個完整的圖片輪播就完成了。在此附上一個完整輪播圖的程式碼，程式碼僅供幫助理解使用，切勿盲目複製。