分析:移动端的轮播图最主要的就是手势触摸点击,移动和移动结束的一系列的事件,利用touch相关事件实现移动端常见滑动效果和常见的手势事件 。轮播图滑动的时候通过判断触摸屏幕的开始位置与结束位置是否大于容器的三分之一(至于多少自己定),大于则下一张,小于则回到原来的位置
解析touch:
1.touch是移动端的触摸,是一组事件。
2.touchstart 当触摸屏幕的时候触发
3.touchend 当手指离开屏幕是触发
4.touchmove 手指在屏幕中来回滑动触发
5.touchcancel 被迫中止手势滑动的时候出发(来电,信息等)
具体参考网站:
以上的事件的even对象上都存在以下的属性:
名字:TouchList 触摸点(一个手指触摸就是一个触发点,和屏幕的接触点的个数)的集合
changedTouches 改变后的触摸点集合 targetTouches 当前元素的触发点集合 touches 页面上所有触发点集合触摸点集合在每个事件触发的时候,changedTouches 每个事件都会记录,而targetTouches,touches 在离开屏幕的时候无法记录触摸点。
我们需要做的就是获取touches里面的位置属性,如下:
e.touches[0] 第一个触摸点
clientX clientY 基于浏览器窗口(视口) pageX pageY 基于页面(视口) screenX screenY 基于屏幕以下为事件测试查看属性值的源码:
1 2
源码:
1 2 3 4 5移动端轮播 6 7 8924 157 158 159 23