js无缝轮播

1. 轮播图最终效果展示

2.轮播图的布局思想

一个主体盒子中包含六个等高等宽的盒子，为了后序轮播的效果，最后一个盒子的颜色要跟第一个盒子一样。

布局样式代码

 .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;
      }

 <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>

3.实现轮播效果

轮播思路是li距离左侧的距离为负数并且这个负数值为li的总宽度时则可以展示下一个li，这个过程中加上我们的transition就可以实现轮播效果，展示那个li时就用这个li的下标乘以总宽度。

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

获取我们做外层的主体盒子，

通过getElementsByTagName获取我们的ul列表的第一个下标0，

获取我们的六个色块li

    var slid = document.getElementById("slider");
      var slidLis = slid.getElementsByTagName("ul")[0];
      // var slidLis=document.querySelector(".slider-list")
      var slidLi = slidLis.getElementsByTagName("li");
  var index = 0;

 实现我们的自动轮播，封装一个函数，利用index++来让我们li距离左侧ul的距离进行变化，并且给ul，添加过渡效果，通过我们的index，来判断我们的色块是否为最后一个，若为最后一个则将index重新赋值为0，并利用计时器将li距离左侧ul的距离清零将过渡效果清除

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

 通过给我们的最外层的盒子添加鼠标移入移出事件，来进行自动轮播的效果，

mouseenter：当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。

mouseleave：当鼠标指针离开被选元素时，会发生 mouseleave 事件

   //  自动轮播
      var autoplay = setInterval(lun, 2000);
      slid.addEventListener("mouseenter", function () {
        clearInterval(autoplay);
      });
      slid.addEventListener("mouseleave", function () {
        clearInterval;
        autoplay = setInterval(lun, 2000);
      });

4.焦点同步轮播

 焦点布局，利用绝对定位将焦点定位到主体盒子中间，

定义一个cur样式

  .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;
      }

 给焦点添加一个cur样式，默认第一个。

    <!-- 小点部分 -->
      <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>

 创建一个函数，循环我们焦点的长度，当轮播的下标index等于焦点的下标时，为这个焦点添加class样式cur，反则删除这个样式，将我们的这个函数放到我们的轮播图函数中进行调用

 //小圆点

      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");
          }
        }
      }

5.左右按钮

 左右按钮的样式

利用定位到左右两侧

样式可自行调控

    样式  
    .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;
      }  
    布局
     <!--箭头布分 -->
      <a href="#" class="arraw prev" id="left">
        <span></span>
      </a>
      <a href="#" class="arraw next" id="right">
        <span></span>
      </a>

 给我们的左侧按钮添加点击事件，当点击的时候调用一下轮播函数即可。

点击右侧按钮时，让我们的index自减，判断index是否为-1为负一是则证明左侧已经没有色块，则跳到我们最后的一个色块，将li距离ul左侧的距离进行调整，并且将过渡效果给关了，

反之则将li距离ul左侧的距离重新计算利用自减后的index。

      var lef = document.getElementById("left");
      var righ = document.getElementById("right");

    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();
      });