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

　　顧名思義，輪播圖就是在網頁中能夠循環播放并且可以手動切換的圖片。輪播圖一般作為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時，清除該定時器。

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

　　css部分：

　　html部分：

　　Js部分：

　　引用的運動插件部分：

　　本文章由千鋒成都web前端培訓學員分享，學習web前端，可以參考千鋒提供的web前端學習路線，該學習路線對從零基礎小白到web前端初級開發工程師，web前端高級開發工程師，后面的web前端大神級開發工程師都有一個明確清晰的指導，根據千鋒提供的web前端學習路線圖可以讓你對學習web前端開發需要掌握的知識有個清晰的了解，并快速入門web前端開發。

上一篇

成都web前端培訓：自動化構建工具gulp使用

下一篇

成都web前端學習：CSS中position的定位技術