原生js实现一个轮播图

最近有个正在学习前端的朋友问我原生js怎样实现一个轮播图，作为一个前端的小菜鸡，当然不能说自己不会啊！话不多说，先上图！

• HTML

<div class="banner">

  <!-- 轮播图片 -->
  <div class="banner-img">
    <img class="on" src="./img/img.png" alt="" />
    <img src="./img/img_1.png" alt="" />
    <img src="./img/img_2.png" alt="" />
  </div>

  <!-- 小圆点 -->
  <div class="banner-dot">
    <div class="dot-item active"></div>
    <div class="dot-item"></div>
    <div class="dot-item"></div>
  </div>

  <!-- 左切换按钮 -->
  <div class="left-btn btn">&lt;</div>
  <!-- 右切换按钮 -->
  <div class="right-btn btn">&gt;</div>
  
</div>

• CSS部分

  * {
    margin: 0;
    padding: 0;
  }

  html,
  body {
    height: 100%;
  }

  .banner {
    position: relative;
    width: 50%;
    margin: 0 auto;
  }

  img {
    width: 100%;
    height: 500px;
    display: none;
  }

  .on {
    display: block;
  }

  /* 按钮公共样式 */
  .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    background-color: rgba(136, 136, 136, 0.6);
    cursor: pointer;
    user-select: none;
  }

  .btn:hover {
    background-color: rgba(122, 122, 122, 0.9);
  }

  /* 左边按钮 */
  .left-btn {
    left: 10px;
  }

  /* 右边按钮 */
  .right-btn {
    right: 10px;
  }

  /*  小圆点 */
  .banner-dot {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  .dot-item {
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: rgba(218, 218, 218, 0.5);
  }

  .active {
    background-color: #fff;
  }

• js部分

  const imgList = document.querySelectorAll(".banner img"); // 图片列表
  const leftBtn = document.querySelector(".left-btn"); // 左边按钮
  const rightBtn = document.querySelector(".right-btn"); // 右边按钮
  const dotItem = document.querySelectorAll(".dot-item"); // 小圆点列表
  const button = document.querySelectorAll(".btn"); // 按钮
  let timer = null; // 定时器
  let index = 0; // 索引

  // 自动轮播
  timer = setInterval(() => {
    changeImg("next", imgList, dotItem);
  }, 2000);

  imgList.forEach((item) => {
    // 鼠标移入&暂停轮播
    item.addEventListener("mouseenter", () => {
      clearInterval(timer);
    });

    // 鼠标移出&开始轮播
    item.addEventListener("mouseleave", () => {
      // 继续轮播
      timer = setInterval(() => {
        changeImg("next", imgList, dotItem);
      }, 2000);
    });
  });

  // 切换上一张图片
  leftBtn.addEventListener("click", () => {
    changeImg("previous", imgList, dotItem);
  });
  // 切换下一张图片
  rightBtn.addEventListener("click", () => {
    changeImg("next", imgList, dotItem);
  });
  // 所有按钮
  button.forEach((item) => {
    // 鼠标移入&暂停轮播
    item.addEventListener("mouseenter", () => {
      clearInterval(timer);
    });

    // 鼠标移出&继续轮播
    item.addEventListener("mouseleave", () => {
      // 继续轮播
      timer = setInterval(() => {
        changeImg("next", imgList, dotItem);
      }, 2000);
    });
  });

  // 封装函数：图片切换
  // @active: 切换动作  @imgList: 图片列表  @dotList: 小圆点列表
  function changeImg(active, imgList, dotList) {
    // 判断切换动作
    if (active === "next") {
      index++;
      if (index > imgList.length - 1) {
        index = 0;
      }
    } else {
      index--;
      if (index < 0) {
        index = imgList.length - 1;
      }
    }
    // 图片列表切换
    imgList.forEach((item, i) => {
      if (i === index) {
        item.classList.add("on");
      } else {
        item.classList.remove("on");
      }
    });
    // 小圆点切换
    dotList.forEach((subItem, subIndex) => {
      if (subIndex === index) {
        subItem.classList.add("active");
      } else {
        subItem.classList.remove("active");
      }
    });
  }
</script>
[代码片段](https://code.juejin.cn/pen/7105263601283235871)