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

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

HTML代碼：

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

CSS代碼：

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

在綁定事件之前，我們首先要知道無縫輪播圖的原理和一些技術關鍵點。

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

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

關鍵點2：所有輪播的圖片使用一個共同的父元素wrapper包裹起來；

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

關鍵點4：父元素wrapper的寬度為圖片個數(shù)（原始圖片個數(shù)+1，因為克隆多添加了一張圖片）乘以單獨一張圖片的寬度；

關鍵點5：實現(xiàn)無縫輪播的判斷條件，marginleft樣式重置時機；

關鍵點6：動態(tài)生成分頁器按鈕，并設置分頁器pagination樣式；

關鍵點7：實現(xiàn)自動播放和清除播放，使用計時器setInterval（）和 clearInterval（）

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

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

最后在HTML頁面中進行初始化，最好放到HTML結束標簽之前的位置，因為我們封裝的插件是依賴于jQuery的，因此首先引入jQuery文件，然后在引入我們自己封裝的js文件；最后就是進行初始化設置：

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

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

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