哪里做的不好，欢迎指导，更希望我的讲解能够帮助到你

首先向大家展示一下效果图 注意第六张图和第一张图的切换

因为布局部分太过容易就不做细致讲解了，直接发出来供大家参考

CSS代码部分

  /* 主体部分 */

  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #slider {
    position: relative;
    width: 680px;
    height: 340px;
    margin: 100px auto;
    /* outline: 2px solid red; */
    overflow: hidden;
  }

  .slider-list {
    display: flex;
    position: relative;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: all 1s;
  }

  .slider-list li {
    flex-shrink: 0;
    width: 680px;
    height: 340px;
  }

  /* 小点部分 */
  .dot-list {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.3);
  }

  .dot-list .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
  }

  .dot-list .dot.cur {
    background-color: red;
  }

  /* 左右按钮布局 */
  .arraw {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.795);
    display: none;
  }

  .prev {
    left: 0;
  }

  .next {
    right: 0;
  }

  .arraw span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%);
    width: 10px;
    height: 10px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
  }

  .prev span {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .next span {
    transform: translate(-50%, -50%) rotate(-135deg);
  }

  #slider:hover .arraw {
    display: block;
    }

HTML代码部分

<div id="slider">
  <!-- 图片部分 -->
  <ul class="slider-list">
    <!-- <li><a href="#"><img src="./img/5.jpg"></a></li> -->
    <li style="background: #453a94">1</li>
    <li style="background: #fff1eb">2</li>
    <li style="background: #4facfe">3</li>
    <li style="background: #96e6a1">4</li>
    <li style="background: #fda085">5</li>
    <li style="background: #a18cd1">6</li>
  </ul>
  <!-- 小点部分 -->
  <div class="dot-list">
    <span class="dot cur"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <!--箭头布分 -->
  <a href="#" class="arraw prev" id="left">
    <span></span>
  </a>
  <a href="#" class="arraw next" id="right">
    <span></span>
  </a>
</div>

JS代码部分

首先我们要先获取所有需要用到的元素

  var slid = document.getElementById("slider");//轮播图盒子
  var slidLis = slid.getElementsByTagName("ul")[0];
  var slidLi = slidLis.getElementsByTagName("li");//轮播图里的所有图片
  var lef = document.getElementById("left");//左侧按钮
  var righ = document.getElementById("right");//右侧按钮

然后定义一个用来存储点击或者划入暂停时的下标，避免轮播图乱跳

  var index = 0;

封装一个定义轮播图轮播的函数，便于划入点击时调用，减少代码量。这块的难点是： 我们切换的并不是图片，而是第一个图片的位置（也可以说是整个存放轮播图的ul），每次轮播我们都要给第一个盒子的位置向左偏移一个Li的宽度，公式就是向左偏移的宽度等于（当前下标*一个Li宽度），还有就是记得添加以后动画效果，这样会显得有视觉的欺骗效果。如果到最后一张图，我们就让下标直接变成0，回到第一张图，重新进行循环。还要注意变到到第一张图的位置时，去除动画效果，避免跟第一张的动画效果冲突

  function lun() {
    index++;
    circe();

    // 每次增加更换图片，更改的是第一张图的位置（当前下标*底图盒子的宽度）
    slidLis.style.left = index * -680 + "px";

    // 添加动画渐渐划过效果，并添加动画时间
    slidLis.style.transition = "all 1s";

    // 如果到最后一张图，我们就让下标直接变成0，回到第一张图，重新循环
    if (index === 5) {
      index = 0;
      setTimeout(function () {
        // 修改到第一张图的位置，并且去除动画效果，避免跟第一张的动画效果冲突
        slidLis.style.left = 0;
        slidLis.style.transition = "none";
      }, 1000);
    }
    circe();
  }

点击左右侧按钮，调用我们封装好的轮播图函数：调用点击右边很简单，就是调用下函数就OK，点击左侧按钮的时候会相对麻烦，首先改变下标，就是用当前下标减一，然后向上面的公式一样改变盒子距离左边的距离，然后进行判断，下标减到负一的时候就会跳到最后一张图片

  righ.addEventListener("click", lun);
  lef.addEventListener("click", function () {
    index--;
    if (index === -1) {
      slidLis.style.left = 5 * -680 + "px";
      slidLis.style.transition = "none";
      index = 4;
      setTimeout(function () {
        slidLis.style.left = index * -680 + "px";
        slidLis.style.transition = "all 1s";
      }, 0);
    } else {
      slidLis.style.left = index * -680 + "px";
    }
    circe();
  });

封装一个定时器，调用函数进行自动轮播

  //  自动轮播
  var autoplay = setInterval(lun, 2000);

鼠标划入时的调用，清除自动轮播的定时器

  slid.addEventListener("mouseenter", function () {
    clearInterval(autoplay);
  });
  

鼠标划出时的调用，先清除定时器，并给定时器重新调用赋值

  slid.addEventListener("mouseleave", function () {
    clearInterval;
    autoplay = setInterval(lun, 2000);
  });
  

定义函数焦点对应修改图片，并在上面各个修改轮播的位置调用

  //首先获取到所有的焦点
  var dotList = document.getElementsByTagName("span");

  //封装函数更新焦点位置
  function circe() {
    for (var i = 0; i < dotList.length; i++) {
      if (i === index) {
        dotList[i].classList.add("cur");
      } else {
        dotList[i].classList.remove("cur");
      }
    }
  }