HTML+CSS+JS轮播图

<div id="outer">
          <!-- 添加轮播图左箭头 -->
          <button id="prev">
            <i class="fas fa-angle-left"></i>
          </button>
          <ul id="imgList">
            <li>
              <a href="#"><img src="./img/01.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/02.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/03.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/04.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/05.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/06.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/07.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/08.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/01.jpg" alt="" /></a>
            </li>
          </ul>
          <!-- 添加轮播图右箭头 -->
          <button id="next">
            <i class="fas fa-angle-right"></i>
          </button>
          <!-- 添加导航点 -->
          <div id="navDiv">
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
          </div>
        </div>

 css样式

#outer {
  width: 610px;
  height: 470px;
  position: relative;
  top: 10px;
  left: 0;
  overflow: hidden;
}

#imgList {
  list-style: none;
  position: absolute;
  left: 0;
}

#imgList li {
  float: left;
  margin: 0 10px;
}

#imgList img {
  width: 590px;
  height: 470px;
}
/* 设置轮播图箭头 */

#prev {
  position: absolute;
  width: 25px;
  height: 35px;
  line-height: 35px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 16px;
  color: rgb(240, 231, 231);
  border: none;
  outline: none;
  z-index: 9998;
  top: 50%;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

#prev:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

#next {
  position: absolute;
  width: 25px;
  height: 35px;
  line-height: 35px;
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 16px;
  color: rgb(240, 231, 231);
  border: none;
  outline: none;
  z-index: 9998;
  margin-top: 220px;
  left: 575px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

#next:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
/* 设置导航点 */

#navDiv {
  position: absolute;
  bottom: 22px;
  margin-left: 30px;
  z-index: 9999;
  float: left;
}

#navDiv a {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  background-clip: content-box;
  border: 3px rgba(255, 255, 255, 0.4) solid;
  background-color: rgba(109, 106, 106, 0.4);
}

#navDiv a:hover {
  border: 3px solid rgba(255, 255, 255, 0.2);
  background-color: white;
}

#navDiv .active {
  border: 3px solid rgba(255, 255, 255, 0.2);
  background-color: white;
}

js样式

window.onload = function () {
  setInterval("show()", 1000);
  var prev = document.getElementById("prev");
  var next = document.getElementById("next");
  var imgList = document.getElementById("imgList");
  var img = document.getElementsByTagName("img")[2];
  var imgArr = [
    "./img/01.jpg",
    "./img/02.jpg",
    "./img/03.jpg",
    "./img/04.jpg",
    "./img/05.jpg",
    "./img/06.jpg",
    "./img/07.jpg",
    "./img/08.jpg",
    "./img/01.jpg",
  ];
  imgList.style.width = 610 * imgArr.length + "px";
  var index = 0;
  var allA = document.getElementsByClassName("navs");
  allA[index].style.backgroundColor = "#FFF";
  for (var i = 0; i < allA.length; i++) {
    allA[i].num = i;

    allA[i].onclick = function () {
      clearInterval(timer);
      index = this.num;
      //切换图片
      imgList.style.left = -610 * index + "px";
      setA();
      move(imgList, "left", -610 * index, 40, function () {
        //动画执行完毕，开启自动切换
        autoChange();
      });
    };
  }
  autoChange();
  function setA() {
    if (index >= imgArr.length - 1) {
      index = 0;
      imgList.style.left = 0;
    }
    for (var i = 0; i < allA.length; i++) {
      allA[i].style.backgroundColor = "";
    }
    allA[index].style.backgroundColor = "#FFF";
  }
  var timer;
  function autoChange() {
    timer = setInterval(function () {
      index++;
      index %= imgArr.length;
      move(imgList, "left", -610 * index, 20, function () {
        setA();
      });
    }, 2000);
  }
  prev.onclick = function () {
    clearInterval(timer);
    index--;
    if (index < 0) {
      index = imgArr.length - 1;
    }
    img.src = imgArr[index];
    setA();
    move(imgList, "left", -610 * index, 40, function () {
      autoChange();
    });
  };
  next.onclick = function () {
    clearInterval(timer);
    index++;
    if (index > imgArr.length - 1) {
      index = 0;
    }

    img.src = imgArr[index];
    setA();
    move(imgList, "left", -610 * index, 40, function () {
      autoChange();
    });
  };
};

 效果