pc端和移动端的轮播图实现(只是结构,内容以后慢慢补充)
轮播图
PC端
移动端
-
原生js的写法
图片顺序 8123456781
- 设置计时器
- 当过度完成之后判断index是否到达两边界限,是的话设置位移
- 手指touchstart时,获取位置,暂停计时器
- 手指touchmove时,计算滑动距离,图片跟着位移
- 手指touchend时,判断距离是否超过1/3
- 超过图片滑动,判断是左滑还是右滑
- 不超过的话,滑回原来位置
- 重新开始计时器
-
swiper插件
-
zepto写法
原生js的写法
图片顺序 8123456781
swiper插件
zepto写法