原生 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	是否取消绑定