很多新手朋友经常在群里问，需要移动端手机上幻灯片图片轮播js特效源码。因为我们有同事已经写好了轮播js模块，我每次都是直接调用代码，没怎么写过，所以也帮不上忙。最近手头不忙就自己琢磨着写了swipeSlide玩玩。我还不太会用原生js的touch相关事件，所以暂时是在Zepto打包Touch模块的基础上写的，如果大家要用的话，一定要注意。
20140930更新v1.1：这两天抽空把原生js的touch相关事件研究了下。参照了一些成熟代码，把原先需要依赖Zepto Touch模块去掉了，现在swipeSlide使用是原生js来处理touch事件，高大上啊！还特别加入Zepto或jQuery的支持，使这个插件可以更灵活，让大家有更好的选择。
20141007更新v2.0：十一期间，把手机端很流行的整屏滚动效果也整合到swipeSlide里了，现在应该算是个比较成熟的插件了，欢迎留言提bug。
20150203更新：每次更新这篇文章也很麻烦，大家有在使用中有任何疑问，请直接留言。代码都更新在GitHub，请去那边下载。
因为我js很菜，所以代码看起来比较基础，源码里都有详细注释，欢迎各位拍砖，促使我进步^_^
GitHub链接，求Star。
不给参数，就是最基本的，4秒切换一次。
参数：
- ul：图片项外面的dom（默认ul）
- li：图片项的dom（默认li）
- continuousScroll：连续滚动（默认false）
- autoSwipe：自动切换（默认true）
- speed：切换速度（默认4000毫秒）
- axisX：X轴切换（默认true）
- transitionType：过渡类型（cubic-bezier，默认ease）
- lazyLoad：图片懒加载（默认false。开启后，配合data-src使用，默认加载当前、前一张、后一张，共三张图片）
v2.2.1:
- 优化懒加载时js阻塞导致轮播图片无法显示
v2.2:
- 修复Chrome模拟器touch变鼠标后js报错
- 修复只有1个轮播时禁止自动切换
v2.1:
- 支持Windows Phone
v2.0:
- 支持选择连续滚动
- 支持选择滚动轴
- 增加过渡效果（cubic-bezier，默认值为ease）
v1.1:
- 支持Zepto精简版或jQuery 2.x库，去掉Zepto Touch模块依赖
- 增加图片跟手滑动
- 改善部分Android浏览器滑动卡顿
v1.0:
- 支持选择自动或手动切换
- 支持改变切换速度
- 支持图片懒加载
DEMO里有3个例子，几乎涉及到图片轮播的所有情况。最后的例子还加了个回调，配合轮播右下角的圆点序号（因为我觉得这个不属于一般情况）。
沙发有木有？呵呵
图片好像显示不出来哦。
没有自己点击下一张这种？
手机上哪有这种需求
小按钮，大手指，戳个半死没点中…
西大大，出东西了，收着~
请教一下，这个在chrome的移动端调试下可以实现滑动切换，但手机上访问却不可以，我不太懂JS，正在学习，不知道是哪里有问题呢？
事实证明，Zepto的touch很烂，有空用原生的写个试试。
如果你需要手机端轮播，试试这个：https://github.com/thebird/Swipe
收到，我也尝试测试了下zepto的touch，在安卓下的表现确实不好，swipe很好用，效果相当的不错，谢谢您的帮助。
他们都说你是大神！！我来看看！
点个赞先~~~
西大大~~~
这个收藏下，我的手机版界面还需要这个。哈哈
能支持<div><img src ></div> 也就是 支持不同的父子dom
为什么我在轮播中加一个表单，结果表单按钮事件无法获取到。
应该是整个轮播绑定了touch事件，我只判断了里面的超链接，表单倒是没考虑到。抽空我改改试试
怎么下载啊？
去github里下载即可 😉
我想问一下，如何把jq拆出来，因为有其他前端也需要用到jq，你这个好像把jq集成进去了，别的就用不了了。
我没有把jq集成进去，github里放那个只是为了方便测试。
具体引用看index.html里就可以啦
❓ Hello， 鉴定完毕，Lumia920手机WP8.1系统下的IE11 for Mobile环境下，触摸事件失效。
你好，正好我手上有WP8.1的Lumia920，没发现问题。可否描述具体一点？ 🙄
用Zepto，li的style为-webkit-transform: translate3d(0px, 0px, 0px); 左右滑动不了
用jQuery，li的style为-webkit-transform: translate3d(-100px, 0px, 0px);，图片全挤到一块去了。
折腾一晚上也没搞出来，请教下作者怎么回事。
是你本地滑不动，还是某一款手机扫上面的二维码滑不动？什么手机，第几个二维码
http://xh.oauth.aoh.cc/act/20150210?isSend=1
这个网页，你能帮忙看下么？我只知道是css冲突导致的，但是不知道怎么修复。
iPhone 5S和Chrome模拟器正常
🙁 3.0的版本有问题，我反而在我的网页上用回2.2.1是没有问题。3.0以上的问题是我靠左边点击的时候，只要是iphone5刷新后第一次点击靠左边的地方，就会马上会轮番到下一页。 而且点击进入某个链接后，后退到首页，他不能clearInterval(autoScroll);。2.2.1没问题！
感谢反馈。
最新版3.1.0是否也有同样问题？
另外，你用的场景（整屏滑动，还是广告轮播），和参数，是否可以回复下，我好测试修改。
想请问下，是否可以调整高度啦，我想移动端上面，高度稍微窄点，避免扑满一大半屏幕，谢谢。
这个是布局的问题，你可以固定高度，也可以想我demo里那样，成比例高度。
和jQuery冲突了
你好，请问是jQuery哪个版本？我测试一下
是jQuery和zepto冲突了好像，jQuery是2.0的
如果你用了jQuery，就没必要用Zepto了吧。我试了下，用jQuery 2.0.0是没有问题的
我是移动端的，zepto很多比jQuery舒服。你试下jQuery和zepto这两个在这个swipeSlide这个事件里有冲突
❓ 既然你用了Zepto，干嘛又要去引jQuery，这两个库本来就是类似的，默认都是$，一起用有冲突很正常吧，删掉一个不就好了。或者把$改名字
因为要用到jQuery的slideToggle，也要用到swipe.js和touch.js的滑动插件，touch.js没有zepto.js会报错
问题解决了吗？
把zepto去掉了，touch.js会报错，运行是可以，但是会影响触摸等事件。
当离开图片切换页面时，callback还在执行，导致再返回图片切换页面时，出现一些处理问题。
是点到下个页面，然后浏览器返回当前页面，callback还在执行？按理说还在执行也正常呀，你这边遇到什么问题需要不执行？
回来的话，会新开一个setTimeout，之前那个setTimeout还在执行。导致图片切换的选中的圆点 跳动混乱。
😮 我拷贝到自己的项目中，切换的时候，效果不是很流畅，但是把代码单独拷出来，却是流程的，搞不懂是这么回事，我把页面上其他touch事件注释掉了，也还是一样，请问楼主知道这是什么导致的吗
可否给个例子看看？这个轮播插件几百万人访问的页面貌似也还OK
你好，想要下面的白色圆圈那里不可以点击切换要怎么修改
你好，想要下面的白色圆圈那里不可以点击切换要怎么修改,是不是要改源码
我这边的点只是装饰，无法点击吧，手机里跟PC不一样
你好，去掉点击是切换，保留自动切换和滑动切换，要怎么改
你好，插件非常好用，非常感谢分享，就是懒加载的时候 我该怎么设置呢？js和html我该如何设置呢？
请看github里的第一个示例链接，demo2
我在手机上我把html图片外层结构的a标签删掉了，每一个图片都有一个脚本控制跳转连接，假如点击第一张，他跳转的地址是第二张图片跳转的地址，改修改哪个地方？
这是本插件的bug，最新版3.4.0已经修复了这个问题，请到github下载最新代码，感谢支持
您好，我在使用的时候有一个问题，图片在轮播到第一张后，再往前手动滑动后，图片无法自动轮播了，或者图片轮播到最后一张，手动滑动图片到下一张（第1张），图片也无法继续自动轮播，只能手动滑动到下一张才可以继续自动轮播，这是什么问题呢？
是DEMO3的问题
你写的这个插件有个bug，就是点击小图出大图的那个demo，当图片小于等于3张的时候，没有bug，但是当图片大于等于4张的时候，当我点击第第四张以后的图片并弹出大图后，我开始滑动翻图，当翻到第二张时，第二张图片出不来，其他的都能出来，这是个很明显的bug，我的js不好，也没法帮你完善这个bug。
谢谢反馈，这几天抽空优化，欢迎关注github上的版本变化
恩，不客气，大家共同进步
已经修复，见github 3.4.1
您好，bug还是没有解决，老问题还在。
你的这个点击小图出现大图的bug依然存在，我想用你这个插件，但是看到这个bug还是果断不用了，bug太明显了
不好意思，之前没注意到您的反馈。试了当前版本确实还存在这个bug，已经更新到3.4.3，确定解决了。
非常感谢您的建议，多多交流，共同学习。
引用到库，绑定element，只要下滑就会触发加载，但是你的demo不会，这个dom结构有关？？？
评论错了，是你写的下拉刷新插件
不好意思比较忙回复比较慢。可否提供demo看看？可以上传到百度网盘之类的
安卓如果连续暴力滑动 会停止轮播，这个是什么原因？
为何点击的时候 自动跳转到下一张 然后在href跳转走啊？
同问 第二个、第三个 安卓如果连续暴力滑动 会停止轮播，这个是什么原因？
A：设置了自动滚动，当手动滑动从最后一个到第一个时，自动滑动会停止。在A基础上滑动到第二个，自动滑动又会启动；在A基础上滑动最后一个，自动滑动还是停止的。
请问怎么设定长宽比，谢谢
有没有人发现第一个demo有时候图片不能完全填充，看得到前面一张图片，或者后面的一张图片 ❓ ❓ ❓
有没有人发现第一个demo有时候图片不能完全填充，看得到前面一张图片，或者后面的一张图片 ❓ ❓ ❓
能不能自己选择是否触屏滑动，把这项加里面
作者小哥，请问这个插件 有提供销毁的方法吗 或者有外部命令让控制它停止或自动播放的方法吗
期待你的回复
好像没有。。。
要是加上防触碰就完美了，滑动超过 1/3 再发生滚动，不然在轮播上点击或轻触的时候也会发生滑动