原生JS 实现轮播图

涉及知识点

• 浮动 + 定位 布局
• DOM 节点操作
• 缓动动画原理封装
• 节流函数
• 事件监听
• 定时器

主要难点

• 无缝滚动原理 (节点的克隆)
• 绑定底部圆圈问题
• 排他思想
• 边界细节处理

最终效果展示

具体实现

• 具体原理就不详细说明了,关键在于边界的判断
  • 底部圆圈和当前轮播的下标采取不同的变量记录，应为 圆圈是3个 图片后期克隆会多一个 采用同一个变量不好控制
  • 自动轮播时 鼠标移入 、点击左/右侧按钮或者是底部圆点 都应该停止自动轮播定时器
  • 鼠标移除 重新开启定时器
  • 每次操作同时更新 圆圈和当前现实的currentIndex值
  • 边界判断 以三张图为例
    • 分清楚轮播图和原点到底有几个，什么时候应该跳到哪一个，index 和 数组长度的关系
    • 当轮播图的index到达3 的时圆点index应该为 2
    • 轮播图的最大index 应该是 3 圆点最大index为2

完整代码

代码地址：https://gitee.com/llvyr/jsgames/tree/master/6-JavaScript%E5%B8%B8%E7%94%A8%E6%A1%88%E4%BE%8B/JS%E5%8E%9F%E7%94%9F%E8%BD%AE%E6%92%AD%E5%9B%BE