【云+社区年度征文】简单的无缝轮播图

前言

轮播图出现各大网站上-无论是pc还是移动端，尤其是电商网站必然能看见轮播图，它使得用户不用滚动屏幕就能看到更多内容，也常常作为广告位。而作为一个前端工程师，手写轮播图是一个必备的技能。

下图展示了京东，淘宝，腾讯云3个网站的轮播图。最常见的2种轮播图有淡入淡出，无缝轮播。无缝轮播对于用户体验会更好一些。

京东商城

淘宝

腾讯云

实现功能

1. 实现一个含有5张图片的无缝轮播图。
2. 鼠标悬停在轮播图部分时，轮播图停止切换，鼠标离开继续自动切换。
3. 通过点击左右2边的按钮，进行轮播图的前一张或后一张的切换。
4. 在图片动画未切换完成之前，禁止切换下一张图片。

效果图如下：

无缝轮播

何为无缝

无缝轮播图，即是在图片左右切换时，最后一张和第一张相连，也就是当主屏幕显示最后一张图片时，如果用户点击下一张图片时，这时候需要将第一张图片呈现给用户。同理当目前主屏幕上显示第一张图片时，如果用户点击上一张图片时，需要将最后一张图片呈现给用户。

处理办法如下图（序号为当前编号的图片）：

初始化轮播图时，我们复制第一张图片与最后一张图片，将复制好的第一张图片放在图片末尾，复制好的最后一张图片放在队列头部。这样当轮播图进行到最后一张时，我们将轮播图位置更改为初始的图片1位置。若我们向左边点击时，遇到图片5时，我们将图片拉到最后一张图片5得位置。这样就不会出现播到最后一张图片后，导致的没图片出现空白的情况。这样就是无缝轮播。

罗列难点

1. 滚动到队列末尾时，改为队列第二张图片。
2. 用户频繁点击切换图片，之前动画未结束造成的显示错乱。
3. 在图片运动结束后，图片没有完全切换完成的情况。
4. 图片运动时，等待轮播的计时器未停止。

布局

布局这一块的话，基本没有什么大问题。就直接上代码。

html部分

css部分

功能分析

如上面的代码完成布局之后，效果如下图，接下来我们就需要让图片自动轮播。

布局图

布局图

轮播逻辑

DOM加载完成之后通过setInterval、定位，让图片队列盒子#box-wrap在展示图片的盒子中进行移动，即随着时间的变化改变DOM（#box-wrap）的left值。关键代码如下。

发现计算步长始终会少那么一点点，最后需要补齐，我们把最后一个参数修改为总时间t，这样时间是会减少到0的。

这里发现向右的轮播正常了，但是发现时间明明设置的5秒钟的自动轮播，为什么不到5秒就执行了。这里当动画轮播启动时，需要终止自动轮播的计时器，结束以后再重新轮播，下面是关键代码。

完整代码

发现一个向右的自动轮播就完成了，向左同理改造move的第三个参数type为轮播方向，接下来的点击切换就简单了，下面是一个无缝轮播的完整代码。