pc端和移动端的轮播图实现(只是结构,内容以后慢慢补充)

轮播图

PC端

移动端

  1. 原生js的写法

    图片顺序 8123456781

    1. 设置计时器
    2. 当过度完成之后判断index是否到达两边界限,是的话设置位移
    3. 手指touchstart时,获取位置,暂停计时器
    4. 手指touchmove时,计算滑动距离,图片跟着位移
    5. 手指touchend时,判断距离是否超过1/3
      1. 超过图片滑动,判断是左滑还是右滑
      2. 不超过的话,滑回原来位置
    6. 重新开始计时器
  2. swiper插件

  3. zepto写法

posted on 2017-12-20 12:40  ouruixi  阅读(736)  评论(0)    收藏  举报

导航