touch事件实现轮播图
时间: 2023-12-25 14:26:23 浏览: 169
原生js实现移动端Touch轮播图的方法步骤
通过touch事件实现轮播图的步骤如下:
1. 给ul注册touch相关的三个事件:touchstart、touchmove、touchend。
2. 在touchstart中,记录开始的位置,清除定时器。
3. 在touchmove中,记录移动的距离,清除过渡,让ul跟着移动。
4. 在touchend中,记录移动的距离,判断移动距离是否超过1/3屏,判断上一屏还是下一屏,或者是吸附,添加过渡,执行动画,开启定时器。
5. 优化:实现快速滑动的逻辑。
6. 优化:重置大小时轮播图错位。
阅读全文