刷卡。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/
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。