在Google搜關鍵字“slider”或“swiper”能找到一大堆相關插件，自己造輪子是為了能更好的理解其中的原理。

給這個插件取名為“veSlider”是指“very?easy?slider”非常簡單的一個滑動插件。

這只是個半成品，僅僅實現(xiàn)了手指滑動、自動輪播、跳轉等基本功能。代碼撐死了200行不到，用的原理也比較簡單粗暴。

點擊跳轉到Github上代碼地址。掃描下面的二維碼可以查看在線demo：

?

一、實現(xiàn)原理與效果

1）在下圖中，將“ul”容器設置為相對定位，子標簽“l(fā)i”設置為絕對定位

2）移動的效果，其實就是動態(tài)修改translateX的值

3）相鄰的兩張圖片能夠貼在一起，就是translateX起的作用

4）動態(tài)給“l(fā)i”添加或移除過渡效果，可以實現(xiàn)緩動

5）當你向左滑動最后一張圖片，跟著出來的是第一張；或者當你向右滑動第一張圖片，跟著出來的是最后一張圖片

6）在第5點中，要實現(xiàn)這種效果需要做些控制，注意“l(fā)i”標簽最后會被設置為visibility，就是在做相關的控制，后面會講到

7）根據(jù)下圖可以看到，當前的“l(fā)i”的translateX值肯定是0，然后上一張為-320px，下一張320px

?

二、結構

1）CSS

只是做了簡單通用設置，可以自定義擴充。

1 .veSlider { 2 position: relative; 3 list-style: none; 4 margin: 0; 5 padding: 0; 6 width: 100%; 7 overflow: hidden; 8 } 9 .veSlider > li { 10 position: absolute; 11 top: 0; 12 left: 0; 13 list-style: none; 14 overflow: hidden; 15 height: inherit; 16 }

?

2）HTML

為了實現(xiàn)方便，我直接將相關的ul與li標簽寫死在頁面中。

高級點的話，可以通過JS腳本動態(tài)輸出，并且在輸出的時候可以做圖片預加載等處理。

height寫在了style中，因為各種情況下的高度是不同的，所以自定義設置

1 <ul class="veSlider" style="height:180px" id="veSlider"> 2 <li> 3 <a href="http://www.cnblogs.com/strick/"> 4 <img src="img/banner.jpg" width="100%" /> 5 </a> 6 </li> 7 </ul>

?

3）JavaScript

通過new一個veSlider對象做初始化。

var slider = new veSlider({container: document.getElementById('veSlider') });

目前可以傳入的參數(shù)只有4個。容器container目前只支持單個的，例如上面的“getElementById”；不支持列表初始化，例如“getElementsByTagName”等

var defaults = {container: '', //容器對象auto: false, //自動輪播easing: 'ease-in', //緩動類型duration: 3000 //自動輪播間隔時間 };

?

三、實現(xiàn)代碼

1）插件封裝

現(xiàn)在有比較時髦的AMD、UMD模塊規(guī)范，為了讓插件支持這些規(guī)范，需要做一些聲明。

為了防止在引入其他JS腳本的時候，將window或undefined重寫掉，會傳入原生的window與undefined。

;(function(factory) {/* CommonJS module. */if (typeof module === "object" && typeof module.exports === "object") {module.exports = factory(window);/* AMD module. */} else if (typeof define === "function" && define.amd) {define(factory(window));/* Browser globals. */} else {factory(window);} }(function(global, undefined) {"use strict";}));

?

2）構造函數(shù)

1.?默認參數(shù)與傳入的參數(shù)做合并

2.?一些值的初始化，例如容器container、偏移對象offset

3.?容器尺寸的獲取，通過方法“getBoundingClientRect”獲得。關于尺寸獲取可以參考《JavaScript中尺寸、坐標》

4.?給容器綁定事件，“touchstart”、“touchmove”等。事件綁定用到了“handleEvent”方式綁定。事件方面的資料可以參考《JavaScript中事件處理》

5.?獲取容器中的子集，并將這些子集的translateX值初始化

6.?初始化自動輪播。下面是部分代碼：

function veSlider(opts) {this.opts = extend(opts, defaults);//默認參數(shù)與傳入?yún)?shù)合并this.size = this.container.getBoundingClientRect(); //容器尺寸this.children = slice.call(this.container.children); //容器的子集this.currentIndex = 0; //當前索引this._bind(); //綁定動畫事件this.caculate(this.currentIndex); //初始化子集的偏移量this.opts.auto && this.play(); //初始化自動輪播 };

?

3）切換子集的判斷

在“touchend”事件中，做了簡單的判斷。

1.?對于慢速滑動，如果滑動的距離超過了當前容器的一半，那就做切換操作

2.?間隔時間在 300ms?內就算快速滑動，滑動距離只要超過 14，就做切換操作

3.?下圖第一次是慢速，第二次是快速

?

4）slideTo方法控制某個子集滑動到指定位置

veSliderProtytype.slideTo = function(index, time) {this.currentIndex = index = this._setThreshold(index);var other = this.direction == CONST.LEFT ? (index - 1) : (index + 1);other = this._setThreshold(other);//隱藏需要移動的子集this.children.forEach(function(dom, i) {if (i == index || i == other) {return;}dom.style.visibility = 'hidden';});//手指移動的時候用.1 自動移動的時候用.4this.caculate(index, time || '.1'); };

1.?傳入當前的子集索引，然后根據(jù)_setThreshold方法獲取到正確的索引值

2. _setThreshold控制“<0”的數(shù)設置為0，“>last”也就是最大索引值的數(shù)，設置為last

3.?給other值賦值，根據(jù)緩存的direction方向，判斷貼在一起的子集是上一個還是下一個，同樣也要做_setThreshold判斷

4.?隱藏會移動的圖片，這個代碼就是用來解決上面“實現(xiàn)原理與效果”中第6點提到的問題

5. 下圖是演示如果不隱藏會出現(xiàn)的問題，滑動的時候出現(xiàn)了最后那張圖片

5.?最后做位移計算

?

?

5）caculate方法計算偏移值

veSliderProtytype.caculate = function(index, time, offsetX) {var _this = this, last = this.last;this.children.forEach(function(dom, i) {var x = i - index;if (index == 0 && i == last) {x = -1;} else if (index == last && i == 0) {x = 1;}setTransition(dom, _this.opts.easing, time);setTranslateX(dom, x, _this.size, offsetX || 0);}); };

1.?計算相對當前子集的尺寸偏移倍數(shù)，通過“i -?index”取得值

2.?再判斷當前子集是第一個或最后一個，這兩個位置比較特殊

3.?設置過渡與translateX的相關值

4. 偏移值是通過計算的“offsetX + size.width * i”，容器寬度的倍數(shù)加上當前移動的距離

5.?以容器寬度為320px為例，通過上面的計算，可以讓當前子集translateX為0，前一張為-320px，后一張為320px，再后一張就是兩倍640px

?

四、可以改進的部分

1、CSS可以有更多的效果，也可以嵌入到JavaScript中

2、li標簽可以用JS腳本輸出，而不用寫死在頁面中

3、支持數(shù)組初始化，例如container設置為通過“getElementsByTagName”獲取到的數(shù)組

4、支持更多的自定義參數(shù)設置，目前只有4個

5、瀏覽器兼容性，目前只支持webkit內核相關的

6、在各個事件里，可以有自己定義的事件

7、目前只支持左右滑動，上下滑動的話要做些更靈活的修改

還有很多方面可以改進，這里就不列舉了。

?

? ? 本文轉自 咖啡機（K.F.J） ? 博客園博客，原文鏈接：http://www.cnblogs.com/strick/p/5297491.html，如需轉載請自行聯(lián)系原作者

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的自制 移动端 纯原生 Slider滑动插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。