前言：頁面中輪播圖，對于一個(gè)前端開發(fā)者來說，是最基本的技能，不論是的商城網(wǎng)站，還是企業(yè)站，輪播圖已經(jīng)成為不可缺少的一個(gè)模塊，而常見的輪播圖不外乎兩種，一種是漸隱漸現(xiàn)輪播圖，一種是無縫輪播圖。網(wǎng)上關(guān)于輪播圖的件也有很多，但是用人家的代碼總會(huì)出現(xiàn)各種各樣的bug，我們修改bug往往要耗費(fèi)很多時(shí)間，而且有些插件的效果還不符合我們的需求，那么我們該如何封裝一個(gè)自己的輪播插件呢？這就是我們今天的任務(wù)，封裝輪播插件。

1、特效離不開合理的頁面布局，所以我們首先需要進(jìn)行頁面布局：

HTML代碼：

2、在HTML頁面中引入css樣式文件：css樣式文件代碼如下：

CSS代碼：

頁面布局完成后，接下來就是javaScript代碼，綁定事件；

在綁定事件之前，我們首先要知道無縫輪播圖的原理和一些技術(shù)關(guān)鍵點(diǎn)。

輪播圖的原理：最外層視野區(qū)域固定大小且的溢出隱藏，通過動(dòng)態(tài)控制包裹圖片的父元素的marginLeft值實(shí)現(xiàn)輪播；

關(guān)鍵點(diǎn)1：最外層的盒子container固定大小，是我們的視野區(qū)域，需要設(shè)置溢出隱藏overflow：hidden；

關(guān)鍵點(diǎn)2：所有輪播的圖片使用一個(gè)共同的父元素wrapper包裹起來；

關(guān)鍵點(diǎn)3：動(dòng)態(tài)克隆第一張圖片所在的元素silde，然后添加到最后；

關(guān)鍵點(diǎn)4：父元素wrapper的寬度為圖片個(gè)數(shù)（原始圖片個(gè)數(shù)+1，因?yàn)榭寺《嗵砑恿艘粡垐D片）乘以單獨(dú)一張圖片的寬度；

關(guān)鍵點(diǎn)5：實(shí)現(xiàn)無縫輪播的判斷條件，marginleft樣式重置時(shí)機(jī)；

關(guān)鍵點(diǎn)6：動(dòng)態(tài)生成分頁器按鈕，并設(shè)置分頁器pagination樣式；

關(guān)鍵點(diǎn)7：實(shí)現(xiàn)自動(dòng)播放和清除播放，使用計(jì)時(shí)器setInterval（）和 clearInterval（）

關(guān)鍵點(diǎn)8：實(shí)現(xiàn)代碼復(fù)用，借助面向?qū)ο蟮拈_發(fā)——構(gòu)造函數(shù)+原型對象+jQuery插件封裝機(jī)制實(shí)現(xiàn)

3、關(guān)鍵點(diǎn)梳理完之后，就可以開始javascript代碼：通過自執(zhí)行函數(shù)實(shí)現(xiàn)；需要在HTML頁面引入JS文件，JS文件代碼如下：

最后在HTML頁面中進(jìn)行初始化，最好放到HTML結(jié)束標(biāo)簽之前的位置，因?yàn)槲覀兎庋b的插件是依賴于jQuery的，因此首先引入jQuery文件，然后在引入我們自己封裝的js文件；最后就是進(jìn)行初始化設(shè)置：

到此為止，我們已經(jīng)實(shí)現(xiàn)了輪播插件的封裝并且實(shí)現(xiàn)了復(fù)用，只需要?jiǎng)討B(tài)的綁定不同的元素mycontainer（可以動(dòng)態(tài)修改成自己的元素名字）即可實(shí)現(xiàn)復(fù)用。

4、如果需要修改容器的大小和圖片的大小,可以直接覆蓋樣式即可：

5、完成。恭喜你，你的輪播插件可以正常切換了。