頁面中輪播圖,對于一個前端開發者來說,是最基本的技能,不論是的商城網站,還是企業站,輪播圖已經成為不可缺少的一個子產品,而常見的輪播圖不外乎兩種,一種是漸隐漸現輪播圖,一種是無縫輪播圖。
網上關于輪播圖的插件也有很多,但是用人家的代碼總會出現各種各樣的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、完成。恭喜你,你的輪播插件可以正常切換了!