如何使用JavaScript制作轮播图

<div id="box">
      <div id="img">
        <img src="img/01.jpg">
        <img src="img/02.jpg">
        <img src="img/03.jpg" alt="">
        <img src="img/01.jpg" alt="">
      </div>
      <div id="direction">
        <div>⬅</div>
        <div>➡</div>
      </div>
      <div id="list">
        <span style="background-color: rgba(255, 0, 0, 1);"></span>
        <span></span>
        <span></span>
      </div>
    </div>

<style>
      * {
        margin: 0;
        padding: 0;
      }
 
      div {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
 
      #box {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
 
 
      #img {
        width: 400%;
        height: 100vh;
        display: flex;
        justify-content: space-around;
      }
 
      #img img {
        width: 25%;
        height: 100vh;
      }
 
      #direction {
        width: 100%;
        height: 5vh;
        position: absolute;
        top: 45%;
        display: flex;
        justify-content: space-between;
      }
 
      #direction div {
        width: 5%;
        height: 5vh;
        text-align: center;
        border-radius: 10px;
        line-height: 5vh;
        font-size: 16px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        overflow: hidden;
      }
 
      #list {
        width: 100%;
        height: 5vh;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
      }
 
      #list span {
        display: block;
        width: 3%;
        height: 3vh;
        margin: 5px;
        border-radius: 100%;
        background-color: rgba(0, 0, 0, 1);
      }
    </style>

<script>
      // 获取到所有图片的父级div
      let img = document.getElementById("img");
      // 获取到所有的图片
      let imgs = img.children;
      console.log(imgs);
      // 获取到图片的宽度
      let imgWidth = imgs[0].offsetWidth;
      console.log(imgWidth);
      // 获取到左右箭头按钮
      let but = document.getElementById("direction").children;
      console.log(but);
      // 获取到最大的div 包含图片，按钮，小圆点
      let box = document.getElementById("box");
      // 下标
      let k = 0;
      // 获取到所有的小圆点
      let list = document.getElementById("list").children;
      console.log(list);
      // 页面打开设定永久性定时器，两秒执行一次
      let int = setInterval(stats, 2000);
      // 自动轮播事件
      function stats() {
        // 下标+1
        k++;
        // 设定过渡时间为1秒
        img.style.transition = "all 1s";
        img.style.marginLeft = '-' + k * imgWidth + "px";
        // 
        if (k == imgs.length - 1) {
          setTimeout(function() {
            k = 0;
            img.style.transition = "";
            img.style.marginLeft = "0px";
          }, 1000);
          list[0].style.backgroundColor = "rgba(255,0,0,1)";
          list[list.length - 1].style.backgroundColor = "rgba(0,0,0,1)";
        } else {
          list[k - 1].style.backgroundColor = "rgba(0,0,0,1)";
          list[k].style.backgroundColor = "rgba(255,0,0,1)";
        }
      }
      // 鼠标移入最大的div时清除定时器
      box.onmouseover = function() {
        clearInterval(int);
      }
      // 移出时设定定时器，开始轮播
      box.onmouseout = function() {
        int = setInterval(stats, 2000);
      }
      // 右箭头绑定点击下一张事件
      but[1].onclick = rightsta;
      //下一张事件
      function rightsta() {
        // 调用自动轮播事件
        stats();
        // 清除点击事件
        // 目的是为了防止短时间内多次点击导致出现bug
        but[1].onclick = "";
        // 在 1 秒后再次绑定点击事件
        // 因为过渡时间是 1 秒
        setTimeout(function() {
          but[1].onclick = rightsta;
        }, 1000);
      }
 
      but[0].onclick = lefts;
      // 上一张点击事件
      function lefts() {
        // 调用上一张轮播事件
        leftstats();
        // 上一张点击事件清除绑定
        but[0].onclick = "";
        // 1 秒后重新绑定
        setTimeout(function() {
          but[0].onclick = lefts;
        }, 1000);
      }
      // 上一张轮播事件
      function leftstats() {
        // 当到达第一张图片时
        if (k == 0) {
          // 让图片到达最后一张
          k = imgs.length - 1;
          // 过渡时间去除，保证用户看不到
          img.style.transition = "";
          // 移动到对应的位置
          img.style.marginLeft = `-${k*imgWidth}px`;
          // 小圆点的第一个变为黑色
          list[0].style.backgroundColor = "rgba(0,0,0,1)";
          // 小圆点的最后一个变为红色，表示当前为最后一张
          list[list.length - 1].style.backgroundColor = "rgba(255,0,0,1)";
        }
        // 设定一次性定时器，50毫秒后执行 k-- 也即是上一张
        setTimeout(function() {
          k--;
          // 加上过渡时间
          img.style.transition = "all 1s";
          // 移动
          img.style.marginLeft = '-' + k * imgWidth + "px";
          if (k < list.length - 1) { // 避免出现报错
            list[k + 1].style.backgroundColor = "rgba(0,0,0,1)";
            list[k].style.backgroundColor = "rgba(255,0,0,1)";
          }
        }, 50);
      }
    </script>