原生单页面touch左右滑动

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

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

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

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

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

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

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

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

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

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

对于多手指触摸操作:  

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

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

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

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

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

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

SuperSlidev2.1焦点图幻灯片tab

SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
  幻灯片和轮播图
 47540  427

jQuery轮播图带浮动焦点详细

jQuery轮播图带浮动焦点详细,可用于产品展示某个点的详细。
  幻灯片和轮播图
 34340  388

全屏无缝滚动加透明遮罩效果

全屏滚动JS 带有遮罩效果
  幻灯片和轮播图
 36866  414

jQuery 3d轮播图

做项目时写的轮播,接手别人的代码时,因问题太多,不兼容ie8,整体重写,利用jQuery的animate来实现兼容性的问题
  幻灯片和轮播图
 33241  401

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

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