JavaScript常见页面效果-无缝轮播

无缝轮播在显示开发中还是比较常见的，基本每个网站都或多或少的用到无缝轮播。
这里写一下之前写的无缝轮播是如何实现的。

---

这个轮播的实现利用了自己写的匀速运动框架，请先看另一篇博客中对匀速运动框架的介绍

---

需求

1. 不做任何操作时候，图片自动向左滑动
2. 可以进行上一张和下一张操作
3. 鼠标悬停在图片上时候停止播放
4. 鼠标离开时候从当前的图片继续往后播放
5. 点击圆点选项时候能够从当前滑动到对应图片
6. 实现无缝：播放到最后一张时候第一张从右面滑入，当前是第一张的时候，点击上一张，最后一张图片从左面向右滑的效果

思路

1. 使用两个ul，分别来装图片和标志当前顺序的选项圆点，两个按钮来实现上一张和下一张的点击
2. 通过改变ul的left值来达到在可见位置的切换图片效果
3. 图片滑动：利用自己提前写好的自定义运动框架，实现图片的滑动效果
4. 自动播放：把动画触发的写进下一张和上一张的点击事件中，利用setInterval来不断调用下一张的点击事件实现自动播放
5. 实现无缝：通过在最后一张图片的后面追加第一张图片，作为第一张图片的复制品，
   
   1. 下一张或者正常播放的时候，图片滑到最后一张，继续下一张滑动到第一张的复制品上，这个动画完成后直接改变ul的left值为0显示第一张，继续从第一张向第二张滑动
   2. 上一张时候，先把ul的left值切换到第一张图片替代品上，然后执行从第一张替代品向最后一张图的动画效果
6. 鼠标移入停止动画，清除当前的setInterval
7. 鼠标移出时候继续播放，重新设置setInterval
8. 检测两次点击时间，避免动画没有完成就需要进行下一次动画

效果图

不会截取动画，就先用图片代替了

代码

HTML结构

 <div class="wrap">
        <!--图片-->
        <ul class="imgs">
            <li></li>
            <li></li>
            <li>