原生 JS 擼一個輪播圖（支持拖拽切屏）

FoxSlider.js 稱不上庫的庫

一、簡述

用慣了各類各樣的組件，並無真正意義上的封裝一個能夠拖拽切屏的輪播圖，通過一番編寫，發現寫這樣一個輪播圖要想寫的好，還真的是挺有難度，不一樣設備的不一樣事件完備性？事件觸發時機的把控？如何更好的去封裝？自適應窗口後的事件重置？等等...，看看swiper這個庫的源碼，就知道小事情也能夠不簡單。
如今寫的這個基本的需求是能夠知足的，能夠經過拖拽切換也能夠點擊切換。

github 傳送門（想你來一塊兒完（wan）善(shua)！！Fork & Star ^_^一下你就會很美

傳送點不了的能夠複製連接： github.com/forrestyuan…

原生擼碼一時爽，一直原生一直爽

1.一、特性

• 面向手機、平板，PC等終端。

1.二、缺點

• 封裝簡陋，功能亟需擴充
• 語義化不夠強
• 用戶配置能力弱

二、調用實例

html 結構代碼

<!-- 引入js文件 -->
<script src="js/base.js"></script>
<!-- 主要dom結構 -->
<div class="slider-container">
  <div class="slide-bar">
    <div class="slider ">
      <img src="assets/slider1.jpg" alt="">
    </div>
    <div class="slider">
      <img src="assets/slider2.jpg" alt="">
    </div>
    <div class="slider">
        <img src="assets/slider3.jpg" alt="">
    </div>
  </div>
  <div class="slider-pin">
    <span class="pin on"></span>
    <span class="pin"></span>
    <span class="pin"></span>
  </div>
</div>
複製代碼

js 代碼

//實例化TouchPlugin，傳入參數
var tp = new TouchPlugin({
    sliderContainer:'.slider-container',
    slider:'.slider',
    slidePin:'.slider-pin',
    sliderBar:'.slide-bar',
    pinClassName:'on',
    pin:'.pin',
    callback:function(e, dir, distance){
         console.log(dir, distance);
    }
  });
複製代碼

運行效果

三、base.js內主要方法

init()

初始化函數

Kind: global function

---

refreshParam(totalMoveLen, spinIndex)

刷新參數

Kind: global function

Param	Type	Description
totalMoveLen	number	滾動位移
spinIndex	number	輪播指標高亮下標

---

setTranslate(domNode, conf, moveLen)

設置指定對象移動樣式 （transform）

Kind: global function

Param	Type	Description
domNode	Object	應用移動樣式的對象
conf	Object	配置對象（animateStyle: ease-in-out
moveLen	number	輪播圖移動距離（切屏經過控制位移）

---

resize()

改變屏幕尺寸重置參數

Kind: global function

---

autoRun(time, initStep)

自動輪播

Kind: global function

Param	Type	Description
time	number	輪播時間
initStep	number	spin下標 和下一屏

---

judgeDir(curX, preX)

判斷鼠標或觸摸移動的方向

Kind: global function

Param	Type	Description
curX	number	鼠標點擊或開始觸摸屏幕時的座標X
preX	numer	鼠標移動或觸摸移動時的座標X

---

testTouchEvent()

檢測當前設備支持的事件（鼠標點擊移動和手觸摸移動）

Kind: global function

---

mouseX(event)

獲取鼠標橫座標位置

Kind: global function

Param	Type	Description
event	Event	事件對象

---

cancelBind(domNode)

取消綁定觸摸或鼠標點擊移動事件

Kind: global function

Param	Type	Description
domNode	Object	須要被取消綁定事件節點對象

---

reBindTouchEvent(domNode, callback, isUnbind)

從新綁定觸摸事件

Kind: global function

Param	Type	Description
domNode	Object	須要被綁定事件節點對象
callback	function	回調方法
isUnbind	boolean	是否取消綁定

---

removeClsName(nodeList, clsName)

移除節點的樣式類名

Kind: global function

Param	Type	Description
nodeList	Array	被移除樣式的節點數組
clsName	string	移除的樣式類名稱

---

setClsName(node, clsName)

添加樣式

Kind: global function

Param	Type	Description
node	Object	添加類名的節點
clsName	string	樣式類名

---

bindSpinClick()

點擊輪播spin 切換屏

Kind: global function

---

checkTargetByCls(domNode, clsName)

經過檢測dom節點是否包含某個樣式名來判斷是否屬於目標target

Kind: global function

Param	Type
domNode	Object
clsName	string

---

bindTouchEvent(domNode, callback, isUnbind)

Kind: global function

Param	Type	Description
domNode	Object	綁定事件的代理對象
callback	function	回調方法
isUnbind	boolean	是否取消綁定