原生单页面touch左右滑动

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

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

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

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

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

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

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

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

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

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

对于多手指触摸操作:  

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

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

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

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

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

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

3D效果左右箭头轮播的js幻灯片特效代码

效果不错的一款js幻灯片特效代码,支持3D立体效果轮播,带左右箭头按钮控制幻灯图播放,支持幻灯图标题,js代码简单易改,比用flash幻灯特效好用得多,自行修改也容易。
  幻灯片和轮播图
 61499  496

CSS3全屏3D画布图片切换特效

CSS3全屏3D画布图片切换特效是一款基于JS+CSS3实现的带左右按钮的控制全屏图片切换代码。
  幻灯片和轮播图
 30979  360

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

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

jQuery轮播插件(原创轮播)

代码注释全,方便大家自行修改的轮播插件
  幻灯片和轮播图
 42901  366

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

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