原生 JS 撸一个轮播图（支持拖拽切屏）

用惯了各种各样的组件，并没有真正意义上的封装一个可以拖拽切屏的轮播图，经过一番编写，发现写这样一个轮播图要想写的好，还真的是挺有难度，不同设备的不同事件完备性？事件触发时机的把控？如何更好的去封装？自适应窗口后的事件重置？等等...，看看swiper这个库的源码，就知道小事情也可以不简单。

现在写的这个基本的需求是可以满足的，可以通过拖拽切换也可以点击切换。

github 传送门（想你来一起完（wan）善(shua)！！Fork & Star ^_^一下你就会很美

原生撸码一时爽，一直原生一直爽

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);
    }
  });
复制代码

运行效果