原生单页面touch左右滑动

所属分类:媒体-幻灯片和轮播图

 28700  303  查看评论 (2)
分享到微信朋友圈
X
原生单页面touch左右滑动 ie兼容8

注:只适用移动端,请用手机或模拟器访问

H5单页面手势滑屏切换示例

- 手指在屏幕上滑动时,页面跟随移动

- 当手指离开屏幕时,计算手指在屏幕上停留的时间

- 如果停留时间小于300ms,则认为是快速滑动切换,页面切换到下一页

- 如果停留时间大于300ms,则认为是慢速滑动,慢速滑动按如下规则处理:

- 如果滑动距离小于屏幕宽度的50%,则回退到上一页

- 如果滑动距离大于屏幕宽度的50%,则切换到下一页 

对于多手指触摸操作:  

- 第一个手指触摸时,正常滑动  

- 第二个手指按下时,不做任何响应操作,继续原有的滑动  

- 当任意一个手指离开屏幕时,结束滑动,剩余的手指操作不做任何处理  

- 当第二个手指再次按下时,触发新的滑动开始,但由于获取的是touches[0],因此,第一个手指移动才会引起页面的滑动  

- 支持多手指同时按下时进行滑动

相关插件-幻灯片和轮播图

原生JS响应式无限循环轮播图(原创)

一个简单的原生JS轮播图,响应式的,动画效果靠的是transfm,如果大佬改一下说不定就可以兼容IE8、9了
  幻灯片和轮播图
 42530  374

仿360新闻图文混排焦点图

仿360新闻图文混排焦点图,兼容ie6
  幻灯片和轮播图
 30537  376

jQuery左右全屏焦点图

jQuery左右全屏焦点图,兼容ie6
  幻灯片和轮播图
 29541  370

根据浏览器宽度大小自动调整图片的jquery相册代码

根据浏览器宽度大小自动调整图片的jquery相册代码
  幻灯片和轮播图
 26295  319

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    陪伴是最长情的告白 0
    2019/3/22 14:13:09
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复