几分钟让你学会简单的图片轮播

图片轮播的方法有很多种，这里我用一种简单的方法。

---

功能

![ZQAD}XT%FT]U)K0NHOFF$_4.png](https://img.haomeiwen.com/i3165609/7813a2ac129b9364.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1. 点击左右箭头能够自由切换上一张图片和下一张图片
2. 利用定时器和函数递归来实现图片间歇切换和动画切换
3. 聚焦原点跟随图片的切换和改变，点击聚焦原点也可以切换图片

(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>    

首先，要有一个大概的思路就是

1. 在最外层有一个父包含块outerWrapper（长宽设为一张图片的大小）,里面有一个图片包含块img-wrapper（宽度为所有图片的宽度和，高度和图片一样）。

2. 设置父包含块outerWrapper的display:hidden ，图片包含块img-wrapper中的img设为浮动的，这样所有图片在一行，并且每次只能看到一张图片，其他都被隐藏了。（注意图片中的第一张和最后一张，这样做是为了无缝隙的从第一张切换到最后一张，从最后一张切换到第一张）。

3. 设置父包含块outerWrapper oposition:relative,图片包含块img-wrapper``oposition:relative,添加内联样式<div class="img-wrapper" style="left:-600px">.

4. 通过改变 img-wrapper 的left 值就可以实现图片的切换。所有可以写一个改变left值得函数，给左右箭头的点击事件添加这个函数，也可以将聚焦原点 的点击事件添加这个函数，实现点击聚焦原点改变图片

5. 怎样让 聚焦原点 跟着图片的切换而改变？可以设一个变量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 一个对象即可。
后面可能还会有其他的图片轮播方式，尽请期待！