图片轮播的方法有很多种，这里我用一种简单的方法。
功能
![ZQAD}XT%FT]U)K0NHOFF$_4.png](http://upload-images.jianshu.io/upload_images/3165609-7813a2ac129b9364.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 点击左右箭头能够自由切换上一张图片和下一张图片
- 利用定时器和函数递归来实现图片间歇切换和动画切换
- 聚焦原点跟随图片的切换和改变，点击聚焦原点也可以切换图片
(ps: 样式代码自己随便写即可)
<div id="outerWrapper">
<div class="img-wrapper" style="left:-600px">
<ul id="get-imgs">
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
</ul>
</div>
<i id="arrow-right"></i>
<i id="arrow-left"></i>
<div id="focus-circle">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
首先，要有一个大概的思路就是
在最外层有一个父包含块
outerWrapper（长宽设为一张图片的大小）,里面有一个图片包含块img-wrapper（宽度为所有图片的宽度和，高度和图片一样）。设置父包含块
outerWrapper的display:hidden，图片包含块img-wrapper中的img设为浮动的，这样所有图片在一行，并且每次只能看到一张图片，其他都被隐藏了。（注意图片中的第一张和最后一张，这样做是为了无缝隙的从第一张切换到最后一张，从最后一张切换到第一张）。设置父包含块
outerWrapperoposition:relative,图片包含块img-wrapper``oposition:relative,添加内联样式<div class="img-wrapper" style="left:-600px">.通过改变
img-wrapper的left 值就可以实现图片的切换。所有可以写一个改变left值得函数，给左右箭头的点击事件添加这个函数，也可以将聚焦原点的点击事件添加这个函数，实现点击聚焦原点改变图片怎样让
聚焦原点跟着图片的切换而改变？可以设一个变量activeSpan变量，取得聚焦原点的数组，然后当点击左右箭头的时候改变activeSpan的值从而改变对应的原点的样式。
以下是代码实现
先取得各变量的值
var outerWrapper = document.querySelector("#outerWrapper"),
//代表左箭头
slideLeft = outerWrapper.querySelector('#arrow-left'),
//代表右箭头
slideRight = outerWrapper.querySelector('#arrow-right'),
//图片包含块
imgWrapper = outerWrapper.querySelector('.img-wrapper'),
//图片的数量
imgNumber = outerWrapper.querySelectorAll('#get-imgs img').length,
//包含聚焦原点的数组
spans = outerWrapper.querySelectorAll('#focus-circle span'),
//对应聚焦原点的数组，对应图片的聚焦原点的下标值，开始为第一张图片，所以为0
activeSpan = 0,
//判断是否正在切换图片，如果正在切换图片点击按钮切换图片无效
flag = true;
//间隙切换图片的定时器
timer = null,
//每次切换图片改变的偏移量，与一张图片的宽度相同
offset = 600;
改变left值得函数
function changeLeft(offset){
//因为后面多次要用到parseInt(imgWrapper.style.left) + offset的值，所以可以赋给一个变量，这样更方便
//newLeft 代表图片包含块imgWrapper加上偏移量后的数值
//就表示你要将图片移动多少
var newLeft = parseInt(imgWrapper.style.left) + offset,
//切换到另一张图片经过几次间隔
interval = 5;
if(Math.abs(offset)>600*2){
interval = 2;
}
//每次间隔移动多大的距离，相当于从一张图片移动到另一张的速度
var speed = offset/interval,
//递归调用的时间
time = 100,
flag = false;
//一个自执行的函数，目的就是每次移动一部分的距离，直到移到自己想到的地方
(function(){
if((offset<0&&parseInt(imgWrapper.style.left)>newLeft)||(offset>0&&parseInt(imgWrapper.style.left)<newLeft)){
imgWrapper.style.left = parseInt(imgWrapper.style.left)+speed+'px';
setTimeout(arguments.callee,time);
}else{
flag = true;
imgWrapper.style.left = newLeft + 'px';
//如果移到最后一张图片，下次切换就变到第一张，从第一张到最后一张也一样
if(newLeft === -(imgNumber-1)*Math.abs(offset)){
imgWrapper.style.left = -Math.abs(offset) + 'px';
}else if(newLeft === 0){
imgWrapper.style.left = -(imgNumber-2)*Math.abs(offset) + 'px';
}
}
})();
}
改变聚焦原点的函数
function changeFocus(index){
if(index === spans.length){
index = 0;
}else if(index === -1){
index = (spans.length-1);
}
activeSpan = index;
outerWrapper.querySelector('#focus-circle span.active').classList.remove('active');
spans[index].classList.add('active');
}
左右箭头点击的函数
slideLeft.onclick = ()=>{
if(flag){
activeSpan--;
changeLeft(offset);
changeFocus(activeSpan);
}
};
slideRight.onclick = ()=>{
if(flag){
activeSpan++;
changeLeft(-offset);
changeFocus(activeSpan);
}
};
点击聚焦原点的函数
for(var i=0,len=spans.length;i<len;i++){
spans[i].index = i;
spans[i].onclick = function(){
if(this.index !== activeSpan){
changeLeft((activeSpan-this.index)*600);
activeSpan = this.index;
changeFocus(activeSpan);
}
}
}
//设置定时器，实现每 2 秒自动切换一次图片
timer = setInterval(slideLeft.onclick,2000);
//当鼠标移动到图片上时，清除定时器，鼠标从图片上移开时重新设置定时器
outerWrapper.onmouseenter=()=>clearInterval(timer);
outerWrapper.onmouseleave=()=>timer=setInterval(slideLeft.onclick,2000);
如果想要源代码可以点击这里
里面有两个demo，index直接用的js函数，index_js是封装了在一个构造函数，每次调用可以直接new 一个对象即可。
后面可能还会有其他的图片轮播方式，尽请期待！
