刷卡。JS是众所周知的触摸滑动插件。它可以处理内容滑动，并支持自定义选项。可以让它自动滚动，控制滚动间隔，返回回调函数。可见在移动前端开发中经常用到。

前言

最近需要开发一个新的“微信活动平台”，手机首页需要幻灯片。因为很久没有写完所有的移动页面了，所以又找了一个幻灯片插件，看看有没有好的幻灯片插件。毕竟不一定要反复造轮子。

综合对比后发现刷卡插件挺好的，所以这里专门写了一篇文章推荐给大家，作为记录，方便下次查看。

简介

Swipe是一个轻量级的移动滑动组件，从文件大小不难看出。它支持1:1的触摸运动，阻力和防滑。单纯从移动端使用，应该能满足基本需求。

说明

从github下载后可以发现总共只有8个文件，其中一个swipe.js文件可能会用到真实的项目。

而index.html style . CSS本身就是作为演示存在的，有兴趣的可以研究一下。

那么具体用起来呢？非常简单，基本上只是以下代码：

！文档类型html

html lang=zh

头

meta charset=UTF-8

标题演示/标题

！-首先介绍JQuery -

script src= http://apps . BD img . com/libs/jquery/2 . 1 . 1/jquery . min . js /script

！-介绍核心swipe.js文件-

script src=swipe.js/script

！-幻灯片基本样式-

风格。刷卡{

溢出：隐藏；

可见性：隐藏；

位置：相对；

}。滑动环绕{

溢出：隐藏；

位置：相对；

}。滑动环绕分区{

浮动：左；

宽度：100%；

位置：相对；

字体大小：140像素；/*这里的样式是为了方便演示，我特意加的*/

}

/风格

/头

身体

！-幻灯片示例是代买的，前两层是外围容器-

div id=slider class=swipe

div class=滑动环绕

！-这三个是幻灯展示的内容，其中1、2、3等数字可以用图片代替，样式可以根据要求改变-

div1/div

div2/div

div3/div

/div

/div

！-页面幻灯片运行脚本(初始化)-

脚本

window . myswipe=Swipe(document . getelementbyid( slider ))；

/脚本

/body

/html

以上代码运行的结果是：

在手机上点击鼠标或者滑动手指，就可以看到幻灯片放映的运行效果。当然，目前只是最基本的，都是默认配置。我们可以通过下面提供的参数，结合自己的需求来定义一个更好的效果。

开始滑动整数(默认值：0)-滑动应该开始的索引位置(滑动索引值，即从*值开始滑动，默认值为0)

速度整数(默认值：300)-上一个和下一个转换的速度，以毫秒为单位。(滑动速度，默认值为300毫秒)

自动整数-从自动幻灯片放映开始(幻灯片之间的毫秒时间)。

连续布尔型(默认值：true)-创建一个没有端点的无限感觉(是否循环滑动，默认值为true)

禁用滚动布尔值(默认值：false)-阻止对该容器的任何触摸来滚动页面(默认值为flase)

停止传播布尔值(默认值：false)-停止事件传播(默认值为flase)

回调函数-在换片时运行。(回调函数)

过渡结束功能-在幻灯片过渡结束时运行。

以下是官方演示示例：

window . myswipe=new Swipe(document . getelementbyid( slider )，{

startSlide: 2，

速度：400，

自动：3000，

连续：真，

disableScroll:假，

停止传播：假，

回调：函数(index，elem) {}，

transitionEnd: function(index，elem) {}

});

不难看出具体参数的用法和位置。如果对这个感兴趣，可以根据需要自己尝试添加参数。都是作为Swipe第二个参数中的json对象存在的。

那么，除了以上参数，Swipe还提供了一些常用的方法(API):

上一页()滑动到上一页(上一页)

下一页()滑动到下一页(下一页)

Get pos()返回当前幻灯片的索引位置(获取当前索引位置)

Getnumslides()返回幻灯片的总数。

滑动(索引，持续时间)滑动以设置索引位置(持续时间：转换速度，单位为毫秒)以设置索引位置(持续时间：转换速度，单位为毫秒)

是简单的接口方法，您可以调用Js来实现所需的效果。

：https://github.com/thebird/swipe/