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

　　顧名思義，輪播圖就是在網(wǎng)頁中能夠循環(huán)播放并且可以手動切換的圖片。輪播圖一般作為banner出現(xiàn)在網(wǎng)頁頭部靠下的位置，用以向用戶展示一些比較重要或熱門的東西。

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

　　總體思路是：

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

　　2.css設(shè)置樣式：定義一個active的class來控制被選中的小圓點的樣式

　　3.js控制輪播：

　　a準(zhǔn)備工作：引入一個運(yùn)動的插件，獲取需要的box、ul、li、ol、按鈕，獲取圖片的張數(shù)和寬度，然后克隆第一張圖片插入ul里面，給ul設(shè)置寬度為(圖片數(shù)量+1x圖片寬度),

　　定義一個空數(shù)組arr存儲小圓點，index存當(dāng)前圖片，btnIndex存小圓點下標(biāo)，標(biāo)志位flag判斷圖片是否處于播放狀態(tài)。

　　b制作輪播：用for循環(huán)創(chuàng)建與圖片數(shù)量相等的小圓點，給它綁定點擊事件，并給第一個小圓點加上active的class，將創(chuàng)建的小圓點插入定義的數(shù)組，將小圓點從內(nèi)存里拿出來放到ol里面。

　　點擊小圓點控制圖片切換：點擊時先利用flag判斷當(dāng)前圖片是否處于播放狀態(tài)，如果未播放就設(shè)為播放狀態(tài)，然后將上一張圖片的active清除并給當(dāng)前圖片加上active，相應(yīng)的index和btnIndex也得變?yōu)楫?dāng)前的，用運(yùn)動插件控制ul進(jìn)行定位，動畫結(jié)束時將flag變?yōu)槲床シ艩顟B(tài)。

　　點擊向右切換：首先同樣判斷圖片的播放狀態(tài)，清除上一張圖片對應(yīng)的小圓點的樣式，并讓圖片和小圓點對應(yīng)的index和btnIndex分別+1，然后判斷index等于圖片數(shù)量和大于圖片數(shù)量，如果等于，就讓btnIndex = 0，如果大于就讓index=btnIndex-=1

　　并讓ul的left為0，然后給當(dāng)前圖片對應(yīng)的小圓點添加active，并用運(yùn)動插件控制ul進(jìn)行定位，動畫結(jié)束時將flag變?yōu)槲床シ艩顟B(tài)。

　　點擊向左切換：同樣判斷圖片的播放狀態(tài)，清除上一張圖片對應(yīng)的小圓點的樣式，并讓圖片和小圓點對應(yīng)的index和btnIndex分別-1，然后判斷

　　Index<0或者btnIndex<0,如果其中一個小于0，就將ul的left賦值為負(fù)的(圖片數(shù)量x圖片寬度)，并讓index和btnIndex都等于(圖片數(shù)量-1), 然后給當(dāng)前圖片對應(yīng)的小圓點添加active，并用運(yùn)動插件控制ul進(jìn)行定位，動畫結(jié)束時將flag變?yōu)槲床シ艩顟B(tài)。

　　定時器控制圖片自動播放：創(chuàng)建一個定時器timer，當(dāng)鼠標(biāo)mouseenter時，在定時器里面調(diào)用向右切換的函數(shù)，當(dāng)鼠標(biāo)mouseleave時，清除該定時器。

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

　　css部分：

　　html部分：

　　Js部分：

　　引用的運(yùn)動插件部分：

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

上一篇

成都web前端培訓(xùn)：自動化構(gòu)建工具gulp使用

下一篇

成都web前端學(xué)習(xí)：CSS中position的定位技術(shù)