在挪动端的h5页面里，我们常常会有轮播图的需求，假如不须要太多的结果，只是简朴的手指滑动和自动轮换结果的话，我比较引荐swipe插件，不过百度搜刮到的这个插件，内里引见的不是很完全，我给人人补充下能够须要的功用。

swipe.js是一个轻量级js触摸滑动类库 – Swipe JS。这是一个异常小的一个javascript类库，但他的功用却不简朴，它能够用来展现web页面上的任何内容，支撑准确的触摸挪动操纵，而且还能够设置自动播放、等比例缩放等等实用性的功用。

Swipe函数引见

下面就为人人引见下Swipe JS的使用要领，Swipe有以下几个参数：

startSlide: 4,  //肇端图片切换的索引位置
auto: 3000, //设置自动切换时候，单元毫秒
continuous: true,  //无穷轮回的图片切换结果
disableScroll: true,  //阻挠由于触摸而转动屏幕
stopPropagation: false,  //住手滑动事宜
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换完毕挪用该函数。

除此之外，另有一些比较经常使用的API要领，比方：

prev()：上一页
next()：下一页
getPos()：猎取当前页的索引
getNumSlides()：猎取一切项的个数
slide(index, duration)：滑动要领

Swipe使用要领

相识基础函数要领后，我们就来看看使用要领。

首先是HTML构造：

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

然后是款式代码：

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > figure {
    float: left;
    width: 100%;
    position: relative;
}

末了设置JS绑定以及参数设置：

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

在这里只要把上面引见的函数参数写在内里，就可以够完成相对应的功用。

末了我们也能够给滑动切换增加高低按钮：

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

别的我举行一些分页器结果的补充吧：

假如须要分页谁人点的结果的话，能够这么增加代码：

nav标签部份就是分页器的相干部份拉，多少个slide就多少个li标签（假如须要分页器结果的童鞋就增加一个nav和ul标签即可，由于代表分页点的li标签须要动态天生，假如你是动态增加的轮播模块！）

<nav>
    <ul id="position">
      <!-- <li class="on"></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li> -->
    </ul>
</nav>

对应的实例化代码（有更简化写法的童鞋能够用本身的要领）：

var slider = Swipe(document.getElementById('slider'), {
                    auto: 3000,
                    continuous: true,
                    callback: function(pos) {
                        var i = bullets.length;
                        while (i--) {
                            bullets[i].className = ' ';
                        }
                        bullets[pos].className = 'on';
                    }
                });
var slides = document.querySelectorAll('.swipe-wrap figure').length;
var liBox = document.getElementById('position');
var liTab;
for (var i = 0; i < slides; i++) {
    liTab = document.createElement('li');
    if (i == 0) {
        liTab.className = 'on';
    }
    liBox.appendChild(liTab);
};
var bullets = document.getElementById('position').getElementsByTagName('li');

另有个症结的处所，这个插件在手指滑动过一次slide模块后就会stop了，不会再自动轮播，这时候须要到swipe.js里去修正一下源码：

如许这个插件基础就可以一般运转满足你最基础的需求了。