主机格调

很多新手朋友经常在群里问,需要移动端手机上幻灯片图片轮播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很菜,所以代码看起来比较基础,源码里都有详细注释,欢迎各位拍砖,促使我进步^_^

DEMO链接

DEMO链接

DEMO链接

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个例子,几乎涉及到图片轮播的所有情况。最后的例子还加了个回调,配合轮播右下角的圆点序号(因为我觉得这个不属于一般情况)。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/500.html