原生js做轮播图

<!-- 负责大致布局 -->
    <div id="a">
      <!-- 负责图片 -->
      <div id="b">
        <img src="./img/1.jpg" alt="图片损坏">
        <img src="./img/2.jpg" alt="图片损坏">
        <img src="./img/3.jpg" alt="图片损坏">
        <img src="./img/1.jpg" alt="图片损坏">
      </div>
      <!-- 左右图标 -->
      <div id="d">
        <!-- 设置点击事件 -->
        <img src="./img/左.png" alt="图片损坏" onclick="fn()">
        <img src="./img/右.png" alt="图片损坏" onclick="fns()">
      </div>
      <!-- 指示点 -->
      <div id="arr">
        <span style="background-color: rgba(255, 0, 0, 0.6);"></span>
        <span></span>
        <span></span>
      </div>
    </div>

/* 初始化 */
    * {
      padding: 0;
      margin: 0;
    }
    /* 主div样式 */
    #a {
      width: 100%;
      height: 700px;
      overflow: hidden;
      position: relative;
    }
    /* 图片div */
    #b {
      width: 400%;
      height: 700px;
      display: flex;
    }
    /* 图片 */
    #b img {
      width: 25%;
      height: 700px;
    }
    /* 添加一个div包左右箭头 */
    #d {
      width: 100%;
      display: flex;
      position: absolute;
      top: 0;
      justify-content: space-between;
    }
    #d img {
      margin-top: 320px;
    }
    /* 指示点 */
    #arr {
      width: 100%;
      height: 30px;
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
    }
    #arr span {
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      margin: 5px 5px;
      background-color: rgba(0, 0, 0, 0.4);
    }

// 提取div
      let a = document.getElementById("a");
      let b = document.getElementById("b");
      let c = document.getElementsByTagName("img");
      let d = document.getElementById("arr");
      let e = d.children;
      // 提取图片
      let img = b.children;
      let imgWidth = img[0].offsetWidth;
      // 设置图片的位置
      let k = 0;
      // 给函数命名方便调用
      function gg() {
        fk();
        // 先自加后判断
        k++;
        // 必须执行的
        b.style.transition = " all 1s";
        b.style.marginLeft = -imgWidth * k + "px";
        // 判断是否为最后一张
        if (k == img.length - 1) {
          // 延缓代码执行防止跟上面必须执行的冲突
          setTimeout(function() {
            k = 0;
            // 取消过渡
            b.style.transition = "";
            // 边距为0（返回第一张）
            b.style.marginLeft = -imgWidth * k + "px";
          }, 1000);
          // 切换到第一张
          e[0].style.backgroundColor = "rgba(255, 0, 0, 0.6)";
        } else {
          // 跟着k（图片）进行变色
          e[k].style.backgroundColor = "rgba(255, 0, 0, 0.6)";
        }
      }
      // 指示点
      function fk() {
        for (let i = 0; i < e.length; i++) {
          // 先让所以的变成灰色
          e[i].style.backgroundColor = "rgba(0, 0, 0, 0.4)";
        }
      }
      // 设置一个定时器
      let clear = setInterval(gg, 2000);
      // 点击事件左
      function fn() {
        fk();
        k--;
        b.style.transition = " all 1s";
        b.style.marginLeft = -imgWidth * k + "px";
        // 判断是否为最后一张
        if (k == 0) {
          // 延缓代码执行防止跟上面必须执行的冲突
          setTimeout(function() {
            k = img.length - 1;
            // 取消过渡
            b.style.transition = "";
            //（返回第k张）
            b.style.marginLeft = -imgWidth * k + "px";
          }, 1000);
          // 切换到第k张
          e[k].style.backgroundColor = "rgba(255, 0, 0, 0.6)";
        } else {
          // 跟着k（图片）进行变色
          e[k].style.backgroundColor = "rgba(255, 0, 0, 0.6)";
        }
      }
      // 点击事件右
      function fns() {
        fk();
        k++;
        b.style.transition = " all 1s";
        b.style.marginLeft = -imgWidth * k + "px";
        // 判断是否为最后一张
        if (k == img.length - 1) {
          // 延缓代码执行防止跟上面必须执行的冲突
          setTimeout(function() {
            k = 0;
            // 取消过渡
            b.style.transition = "";
            // 边距为0（返回第一张）
            b.style.marginLeft = "0px";
          }, 1000);
          // 切换到第一张
          e[0].style.backgroundColor = "rgba(255, 0, 0, 0.6)";
        } else {
          // 跟着k（图片）进行变色
          e[k].style.backgroundColor = "rgba(255, 0, 0, 0.6)";
        }
      }
      // 鼠标移入
      a.onmouseenter = function() {
        clearInterval(clear);
      }
      // 鼠标移出
      a.onmouseleave = function() {
        clear = setInterval(gg, 2000);
      }