原生单页面touch左右滑动

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

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

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

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

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

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

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

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

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

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

对于多手指触摸操作:  

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

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

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

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

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

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

好看的动画切换,底部带进度条

jQuery全屏进度条自动切换有随机切换轮播图
  幻灯片和轮播图
 20299  272

js垂直轮播广告幻灯片

js垂直轮播广告幻灯片
  幻灯片和轮播图
 32054  334

基于jquey实现的轮播插件(原创)

基于jquey实现的轮播插件(支持左右箭头、圆点按钮、触摸切换、自动轮播)简单易用
  幻灯片和轮播图
 22176  222

jquery仿QQ音乐精彩推荐的数组方式轮播

这个是通过数组的原理实现的改变数组的排序元素的class也随之更改产生轮播的效果(代码注释很全,修改方便)
  幻灯片和轮播图
 34109  425

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

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