一个用原生JS造的轮播图插件

一个用原生js造的轮播图插件

自己弄这个*是来自之前vue做一个音乐播放器项目时，用到了一个第三方vuebetter-scroll，当时参考这个文档做轮播图的时候，发现slider-item真实渲染出来的多了两个节点，向作者提问了下，回答当传入 snap:{loop:true} 的时候，前后各 clone 一个节点，保证可以无缝循环轮播，那么多克隆这两个节点是怎么实现无无缝轮播图呢，查阅了相关原理，就做了下这个*。

在线演示

传送门

原理：

所谓的无缝就是利用了两个辅助节点，eg：
5 1 2 3 4 5 1
其中首尾5,1就是辅助节点，为了实现过渡，当真实的5节点滑动到下一节点1时，其实是滑到了辅助1节点，此时再瞬间将位置指向真正的1节点，因为是相同的节点，此时外界就看不到发生的变化。

利用了float和overflow，外界container设置成一张图片的大小，设置voerflow超出部分为hidden，第一个节点辅助节点5的left为0px，下一个就是真实的节点1为-600px(假设图片宽600px)，后面依次推。通过控制容器的left值来实现轮播。(向右偏移left值越来越小)

功能

无缝轮播 用递归实现自动播放，鼠标hover状态时停止自动播放，且浮现左右控制箭头，移开则消失。 焦点dot的状态随图片轮播亮起和熄灭。且可以点击dot来*切换跳转到相应的图片。 轮播间隔时间和图片切换时间在代码里直接改相关时间常量即可。

优化

点击当前的dot按钮，不会触发，不会执行内部响应的代码。避免无效的执行，节省内存。 当快速频繁点击左偏移和右偏移箭头的时候，多次调用内部函数，有可能会导致在动画过程中图片index标号和dot按钮不匹配，出现错误，内部代码也多运行了很多次，浪费内存。在内部触发click的函数中增加一个标志位，动画期间click无效即可。