自制 移動端 純原生 Slider滑動插件

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

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

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

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

 

一、實現原理與效果

1）在下圖中，將“ul”容器設置為相對定位，子標簽“li”設置為絕對定位

2）移動的效果，其實就是動態修改translateX的值

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

4）動態給“li”添加或移除過渡效果，可以實現緩動

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

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

7）根據下圖可以看到，當前的“li”的translateX值肯定是0，然后上一張為-320px，下一張320px

 

二、結構

1）CSS

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

.veSlider {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}
.veSlider > li {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  overflow: hidden;
  height: inherit;
}

 

2）HTML

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

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

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

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

 

3）JavaScript

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

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

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

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

 

三、實現代碼

1）插件封裝

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

為了防止在引入其他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）構造函數

1. 默認參數與傳入的參數做合並

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

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

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

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

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

function veSlider(opts) {
  this.opts = extend(opts, defaults);//默認參數與傳入參數合並
  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 自動移動的時候用.4
  this.caculate(index, time || '.1');
};

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

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

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

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

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

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. 計算相對當前子集的尺寸偏移倍數，通過“i - index”取得值

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

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

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

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

 

四、可以改進的部分

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

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

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

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

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

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

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

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