Swipe-移动端触摸滑动插件swipe.js

文章目录

插件特色

swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常可见使用在移动前端开发中。

使用方法

下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可。

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
window.mySwipe = Swipe(document.getElementById('slider'));
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

设置选项

  • startSlide Integer (default:0) - 开始滚动的位置
  • speed Integer (default:300) - 动画滚动的间隔(秒数)
  • auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)
  • continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)
  • disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
  • stopPropagation Boolean (default:false) - 是否停止事件冒泡
  • callback Function - 幻灯片运行中的回调函数
  • transitionEnd Function - 动画运行结束的回调函数

实例

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

注意

1、原始的Swipe JS,当你用点击或者手势控制了之后,轮播图就不会自动滚动了,目前sina.cn网页也是这个设计逻辑,但是有些客户不给他自动滚动心理就不舒服,解决办法是修改原swipe.js的stop函数如下:

function stop() {
    //delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval);
  }

下面的演示页面就是修改后的,会一直在滚动状态。(来源

演示和下载

下载地址   演示地址(手机扫描下面二维码)

swipe

相关插件推荐

Swiper:最好的移动触摸滑动插件:Swiper

Swipeshow:http://ricostacruz.com/swipeshow/

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:Swipe-移动端触摸滑动插件swipe.js ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/swipe.html)

发表评论

请登录后发表评论:

“Swipe-移动端触摸滑动插件swipe.js”有23个评论

  1. liyichu027_762

    为什么修改stop后速度会变快????

    登录回复
  2. 王武军_CMSS

    这个插件在安卓手机端有bug,滑动页面有莫名消失的bug。

    登录回复
  3. 小小KR

    不错,自己用touch事件写的总觉得不够流畅

    登录回复
  4. leenin818

    我的移动端,还是有问题,在swiper区域外 滑动就切换效果不好了!!1

    登录回复
  5. 斋戒心灵丶

    很好用, 可是能不能加个索引啊

    登录回复
  6. 小虫虫2563

    这个插件bug那么多,还不如用Swiper

    登录回复
  7. 鱼宝宝和猫宝宝

    三幅图的时候,会出现一个显示不出来,成为空白的情况,不知道啥原因~!

    登录回复
  8. 孜孜不倦学习

    看到过老版本有问题,先看看这个是不是完美修复了,期待

    登录回复
  9. z把酒问青天

    支持弹出层吗?

    登录回复
  10. 哈尼hh无敌

    不错不错,找了许多资源,只有你的是正确的,太感谢啦

    登录回复
  11. James_Lau9527

    不好意思,刚刚随便评论的。大家都说还不错,我正想用这个插件做效果,希望可以下载,谢谢~~

    登录回复
  12. 星星可爱多eva

    需要上下滚动的

    登录回复
  13. 用户5232865704

    学习学习

    登录回复
  14. 幸福❤魔天轮

    https://github.com/PRASS95/SwipeVertical

    登录回复
  15. 猫样女人

    手指滑动之后 是否还可以自动轮播

    登录回复
  16. 举重若轻,大巧不工,function stop()这个给力呀,

    登录回复
  17. lx

    能否在这个图片上加上小圆点表示当前是哪张图片

    登录回复
  18. 李先生

    怎样可以改变滚动方向,现在都是左右滚动,如何改成上下滚动

    登录回复