纯js代码-实战轮播图

这今天小编带大家写一个js的轮播图效果，这个轮播图包括了点击上一张，下一张按钮和导航小圆点的点击切换。
轮播图的切换有两种方式，一种是切换图片，还有一种就是存放图片的容器，改变容器的位置，让其往左或往右整体移动。
下面给大家看一下两种方式区别：

上面这种就是直接切换图片方式来实现轮播图，这种方式相较于第二种改变位置的方式来说少了过渡动画的效果。所以小编今天在这里着重讲解一下第二种方式。
首先我们要先明白第二种改变位置是怎样改变的。
先给大家上html代码，看一下图片是怎样放的

<div class="wrapper">
        <ul class="sliderPage">
            <li><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.jpg" alt=""></li>
            <li><img src="./image/3.jpg" alt=""></li>
            <li><img src="./image/4.jpg" alt=""></li>
            <li><img src="./image/1.jpg" alt=""></li>
        </ul>
        <div class="btn leftBtn">&lt;</div>
        <div class="btn rightBtn">&gt;</div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

我们在给body中的元素设置样式之后，它将会变成上图中的摆放样子，div的宽高和ul的高度其实是和图片的宽高是一样的，这里为了显示出div的区域所以我加了一点宽高。
再将元素样式设置完成之后，我们就可以很清楚的明白图片切换是如何进行切换的了，我们至于要改变ul的left就行了。
比如图片的宽度为400px，只需要给ul加上left：-400px，就可以在div的显示区域中看到第二张图片了。

上面的图片就是left：-400px后效果，就这样设置ul的left每-400的增加就可以实现图片切换的效果了。
但现在有个问题就是怎样让图片循环的切换呢，图片切换到最后一张时怎样在变回第一张，可能有细心的同学可发现问题了，我图片的最后一张图片是img1和第一张的图片img1是一样的，没错这就是这个问题的解决关键点。

在这种情况下ul的left已经变为-1600px，显示的是最后一张图片，如果ul的left继续增加的话，那么在div中将什么都没有显示，将会变成下面这种情况：

为了预防这种情况的发生我们要在left：-1600px时加上if判断，如果left的值到达了-1600px，我们就要强制将left的值改为0px，这时div中显示的就是第一张图片，而因为ul中最后一张图片和第一张图片是一样的，所以我们强制转换ul的left值得时候是没有切换效果，即没有过渡动画。
下面给大家附上js代码

<script src="./index.js"></script>
    <script>
        var timer = null;
        var lock = true;
        // 1.获取ul
        var sliderPage = document.getElementsByClassName("sliderPage")[0]
        // 2.每次移动的距离 400
        var moveWidth = sliderPage.children[0].offsetWidth;
        // 3.计算出移动的图片的长度 4
        var num = sliderPage.children.length - 1;
        var index = 0;
        var oSpanArray = document.getElementsByTagName("span")
        // 4.自动轮播
        // setInterval(autoMove,2500)
        timer = setTimeout(autoMove,2500)

        // 8.获取左右按钮
        var leftBtn = document.getElementsByClassName("leftBtn")[0]
        var rightBtn = document.getElementsByClassName("rightBtn")[0]

        leftBtn.onclick = function(){
            autoMove("前")  //1s
        }
        rightBtn.onclick = function(){
            autoMove("下")
        }
        function autoMove(fangxiang){
            if(lock){
                lock = false;
                clearTimeout(timer)
                 if( !fangxiang || fangxiang == "下"){
                     index ++;
                     // 5
                     startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},function(){
                         // 6
                         if(sliderPage.offsetLeft == - num * moveWidth){
                             // 7
                             sliderPage.style.left = "0px"
                             index = 0;
                         }
                         timer = setTimeout(autoMove,2500)
                         lock = true;
                         changeIndex(index)
                     })
                 }else if(fangxiang == "前"){
                     if(sliderPage.offsetLeft == 0){
                        sliderPage.style.left =  - num * moveWidth + "px"
                        index = num;
                     }
                     index--;
                     startMove(sliderPage,{left:sliderPage.offsetLeft + moveWidth},function(){
                         timer = setTimeout(autoMove,2500)
                         lock = true;
                         changeIndex(index)
                     })
                 }
            }
        }
        function changeIndex(_index){
            for(var i = 0;i<oSpanArray.length;i++){
                oSpanArray[i].className = ""
            }
            console.log(_index)
            oSpanArray[_index].className = "active"
        }
        for(var i = 0;i<oSpanArray.length;i++){
           
            (function(myindex){
                // console.log(i);
                oSpanArray[myindex].onclick = function(){
                    lock = false;
                    clearTimeout(timer)
                    startMove(sliderPage,{left: - myindex * moveWidth},function(){
                        lock = true;
                        timer = setTimeout(autoMove,2500)
                        changeIndex(myindex)
                    })
                }
            })(i)
        }
    </script>

js代码中的第一行导入的js文件是js控制元素的运动框架，而运动框架也就是能够让图片滚动切换的关键，有关运动框架的知识我会在下一次在和大家详细讲解。
最后请大家再看一下图片的轮播效果吧！！！