JS部分要实现的主要功能

1. 浏览器改变大小事件
   当浏览器改变大小后触发函数，重新获取图片的宽度并赋值给变量，盒子的位置调整到正确的位置

2. 轮播按钮点击事件
   定义轮播图下方按钮点击事件触发的函数，点击后清除所有按钮样式，然后把被点击的按钮的样式设置为活动状态，盒子位置调整到被点击按钮所对应的图片位置。

3. 轮播图主控函数
   实现每隔3秒图片切换、按钮样式切换

• 轮播图主体部分代码

    <div class="page" id="page">
        <div class="box" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="01.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="02.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="03.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="04.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="05.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="06.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="07.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="08.jpg">
                </a>
            </div>
            <div class="imgBox">
                <a target="_blank" href="#">
                    <img alt="" width="100%" src="01.jpg">
                </a>
            </div>
        </div>
        <div class="spot">
            <span class="activeSpot" index="0" onclick="spotOnclick(this)"></span>
            <span index="1" onclick="spotOnclick(this)"></span>
            <span index="2" onclick="spotOnclick(this)"></span>
            <span index="3" onclick="spotOnclick(this)"></span>
            <span index="4" onclick="spotOnclick(this)"></span>
            <span index="5" onclick="spotOnclick(this)"></span>
            <span index="6" onclick="spotOnclick(this)"></span>
            <span index="7" onclick="spotOnclick(this)"></span>
        </div>
    </div>

• 首先定义好变量，获取各元素，方便后面操作

        var page=document.getElementById("page");
        var box=page.children[0];
        var spot=page.children[1];
        var spotList=spot.children;
        var imgWidth=box.children[0].offsetWidth;
        var pic=1;

1.浏览器改变大小事件

利用window.onresize事件定义浏览器大小改变后触发的函数
语法：

window.onresize = function(){
    imgWidth=box.children[0].offsetWidth;    //窗口大小改变后重新获取图片宽度
    
    //因为图片大小改变了，所以要重新调整box的位置以适应新的图片宽度
    box.setAttribute("style","transition-duration: 0ms; transform: translate3d(-"+ (pic-1)*imgWidth +"px, 0px, 0px);");  
}

注意： 因为pic的数值设置的是下一张图片的位置信息，所以需要使用(pic-1)*imgWidth来设置当前图片的正确位置

2. 轮播按钮点击事件

首先给每个span按钮添加鼠标点击事件onclick="spotOnclick(this)"通过this把元素自身作为参数传递给spotOnclick(a)

        function spotOnclick(a){            //首先清除class属性为"activeSpot"按钮的class属性
            document.getElementsByClassName("activeSpot")[0].removeAttribute("class");
            
            a.className="activeSpot";  //设置当前按钮class属性为“activeSpot”状态
            pic = a.getAttribute("index");  //把pic赋值为当前按钮的index对应的数值
            
            //把box的位置调整到按钮对应的图片位置
            box.setAttribute("style","transition-duration: 300ms; transform: translate3d(-"+ pic*imgWidth +"px, 0px, 0px);") 
        }

注意事项： getElementsByClassName()方法return的是一个list，而不是一个元素，需要用索引[0]来获取到元素，然后再对元素进行操作

3. 轮播图主控函数

这里要实现轮播图的无缝衔接需要在图片列表的最后添加一张图片01，当图片轮播到图片08的时候，继续正常过度到最后一张图片01。过度完成之后把盒子位置重置到开始的位置。
由于最后这个图片01和第一张图片01完全一样，在视觉上盒子重置位置属性没有发生任何变化，但是实际上盒子已经进入下一次循环了，这样就实现了无缝衔接。

        setInterval(function(){            // 首先判断图片是否轮播到最后一张图片08
            if(pic == 8){                  // 当轮播到图片08时执行的逻辑
                spotList[7].removeAttribute("class");
                spotList[0].className="activeSpot";
                box.setAttribute("style","transition-duration: 300ms; transform: translate3d(-"+ pic*imgWidth +"px, 0px, 0px);");
                pic=1;                
                // 执行完过度到第九张图片01后，暂停一秒（为了等待过度动画执行完毕）然后重置box位置
                setTimeout(function(){
                    box.setAttribute("style","transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);");
                    },1000);
            }else {                        // 其他情况执行的逻辑
                spotList[pic-1].removeAttribute("class");
                spotList[pic].className="activeSpot";
                box.setAttribute("style","transition-duration: 300ms; transform: translate3d(-"+ pic*imgWidth +"px, 0px, 0px);");
                pic++;
            }
        }, 3000);

注意事项： 轮播图主控函数主要注意事项就是无缝衔接问题，重点是理解无缝衔接的实现逻辑，明白了逻辑再去写代码就简单很多了。

以上就是使用原生JS实现简单的轮播图效果，本文主要介绍JS代码部分，实际项目中还需要配合CSS样式。本文仅介绍JS部分，感兴趣的小伙伴可以自己尝试着实现一遍。学习的过程中要多学习改代码和自己写代码，对于别人的代码仅作学习参考用，这样更容易理解代码的逻辑加深印象。