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

forrest醬發表於2019-06-05
JS

FoxSlider.js 稱不上庫的庫

1、簡述

用慣了各種各樣的元件，並沒有真正意義上的封裝一個可以拖拽切屏的輪播圖，經過一番編寫，發現寫這樣一個輪播圖要想寫的好，還真的是挺有難度，不同裝置的不同事件完備性？事件觸發時機的把控？如何更好的去封裝？自適應視窗後的事件重置？等等...，看看swiper這個庫的原始碼，就知道小事情也可以不簡單。
現在寫的這個基本的需求是可以滿足的，可以通過拖拽切換也可以點選切換。

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

傳送點不了的可以複製連結： github.com/forrestyuan…

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

1.1、特性

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

1.2、缺點

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

2、呼叫例項

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);
    }
  });
複製程式碼

執行效果

執行效果圖

3、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 是否取消繫結

相關文章