頁面中輪播圖，對于一個前端開發者來說，是最基本的技能，不論是的商城網站，還是企業站，輪播圖已經成為不可缺少的一個子產品，而常見的輪播圖不外乎兩種，一種是漸隐漸現輪播圖，一種是無縫輪播圖。
網上關于輪播圖的插件也有很多，但是用人家的代碼總會出現各種各樣的bug，我們修改bug往往要耗費很多時間，而且有些插件的效果還不符合我們的需求，那麼我們該如何封裝一個自己的輪播插件呢？這就是今天要分享的内容——封裝輪播插件。
1、特效離不開合理的頁面布局，是以我們首先需要進行頁面布局：
HTML代碼：
2、在HTML頁面中引入css樣式檔案：css樣式檔案代碼如下：
CSS代碼：
頁面布局完成後，接下來就是javaScript代碼，綁定事件；在綁定事件之前，我們首先要知道無縫輪播圖的原理和一些技術關鍵點。
輪播圖的原理：最外層視野區域固定大小且的溢出隐藏，通過動态控制包裹圖檔的父元素的marginLeft值實作輪播。
關鍵點1：最外層的盒子container固定大小，是我們的視野區域，需要設定溢出隐藏overflow：hidden；
關鍵點2：所有輪播的圖檔使用一個共同的父元素wrapper包裹起來；
關鍵點3：動态克隆第一張圖檔所在的元素silde，然後添加到最後；
關鍵點4：父元素wrapper的寬度為圖檔個數(原始圖檔個數+1，因為克隆多添加了一張圖檔)乘以單獨一張圖檔的寬度；
關鍵點5：實作無縫輪播的判斷條件，marginleft樣式重置時機；
關鍵點6：動态生成分頁器按鈕，并設定分頁器pagination樣式；
關鍵點7：實作自動播放和清除播放，使用計時器setInterval()和 clearInterval()
關鍵點8：實作代碼複用，借助面向對象的開發——構造函數+原型對象+jQuery插件封裝機制實作。
3、關鍵點梳理完之後，就可以開始javascript代碼：通過自執行函數實作；需要在HTML頁面引入JS檔案，JS檔案代碼如下：
JS代碼：
最後在HTML頁面中進行初始化，最好放到HTML結束标簽之前的位置，因為我們封裝的插件是依賴于jQuery的，是以首先引入jQuery檔案，然後在引入我們自己封裝的js檔案；最後就是進行初始化設定：
到此為止，我們已經實作了輪播插件的封裝并且實作了複用，隻需要動态的綁定不同的元素mycontainer(可以動态修改成自己的元素名字)即可實作複用。
4、如果需要修改容器的大小和圖檔的大小,可以直接覆寫樣式即可：
5、完成。恭喜你，你的輪播插件可以正常切換了！