实现图片轮播的基本原理
有一个视窗容器显示当前图片内容，容器之外的内容都被隐藏
在视窗容器中，有一个包含一组图片的子容器，改变其水平或者垂直方向的值，形成轮播
轮播图位置变化示意图
上图的蓝色框表示视窗容器，蓝色框之外的区域是被隐藏的。当橙色区域的left或者tranlateX为-200时，可视范围由1变成2。此时轮播图为向右翻页。
接下来得思考轮播图应该具有的哪些功能点：
自动播放
无缝循环播放
点击按钮翻页
拖动翻页
轮播图的自动播放
自动播放可以理解为定时执行，就是间隔几秒去修改容器的位置。因此使用setInterval或者setTimeout即可。
以下代码简单是实现了自动轮播的效果。
var content = document.querySelector('.slider-content');
class Slider {
constructor(ele){
this.ele = ele;
this.width = this.ele.parentNode.offsetWidth; // 获取宽度
this.length = document.querySelectorAll('.slider-item').length;
this.animate();
}
move() {
let ele = this.ele;
if(parseInt(ele.style.left) > -(this.length*this.width)) {
// 设置容器改变的left值
ele.style.left = parseInt(ele.style.left) - this.width +'px';
}else{
ele.style.left = 0;
}
}
animate() {
setInterval(this.move.bind(this),2000)
}
}
var box = new Slider(content);
观察上面的效果可以发现，当播放到最后一个图片，再回到第一页时，出现了空白，显然这个效果不理想，以上代码的边界逻辑存在问题，没有实现无缝循环播放。
无缝循环播放
实现无缝循环播放，我们需要向slider-content中的末尾添加上第1页。如下图
无缝循环播放示意图
html结构