轮播图的简单实现

在动手写之前，先来分析一下

可以看到的是轮播图的执行方式主要有两种，一种是通过左边的按钮来进行切换图片，一种是通过右边的按钮来进行切换。下面我们就来分析一下通过右边的按钮来切换图片。

1. 右边按钮
   首先我们定义一个变量index，当我们点击右边按钮的时候，index需要加1。但是这个index也不能无限的去增加，不然的话当我们的index超过轮播图里面放的图片数量的时候，它就不会进行切换了，会卡在最后一张图片上面。所以，我们接下来需要判断一下index是不是大于它的最大数量，当它大于轮播图的最大数量的时候，把它的值重新置于0，这样就可以实现循环切换了。

function bun(){
                index++;
                if(index>pic.length){
                    index=0;
                }

接下来，就变的简单起来了，当index+1 的时候，我们就把对应的图片通过display显示出来就可以了，想对应的，我们要把上一张图片通过display：none隐藏起来。这样就可以了

pic[index].classList.add("show");
pic[index-1<0?4:index-1].classList.remove("show");

以上就基本实现了点击按钮进行切换的功能，同理，左边的按钮与右边的按钮是一样的，只不过改一下参数就可以了。

oLeft.onclick = function(){
            index--;
            if(index<pic.length){
                index=4;
            }
            pic[index].classList.add("show");
            pic[index+1>4?0:index-1].classList.remove("show");         
        }

让它自动循环切换图片，我们只需要加一个定时器就可以了。

let swiper = setInterval(bun,3000);

下面是完整的代码：

 let oLeft = document.querySelector(".left"),
            oRight = document.querySelector(".right"),
            pic = document.querySelectorAll(".b-img ul li"),
            txt = document.querySelectorAll(".b-tab ul li"),
            index=0;
        

            function bun(){
                index++;
                if(index>pic.Length){
                    index=0;
                }
                pic[index].classList.add("show");
                pic[index-1<0?4:index-1].classList.remove("show");
            }
        
        oRight.onclick=bun;

        oLeft.onclick = function(){
            index--;
            if(index<pic.Lenght){
                index=4;
            }
            pic[index].classList.add("show");
            pic[index+1>4?0:index-1].classList.remove("show");
        }

       let swiper = setInterval(bun,3000);

ok，大功告成！撒花（效果在下面）