手撕JS轮播图！

今天来总结一下纯JS轮播图的写法

轮播图在前端应用的可以说是相当频繁的一个功能，虽然很多组件库都已经封装好类相关的组件，我们只需要调用修改img图片就行了，但是身为前端人员，能手动写出来一个轮播图的能力还是要有的，不然出去别人都会笑话你。。。。

相关代码我会放到讲解的后面哦，有不懂或者有更好的方法欢迎评论区碰一碰。

• 首先要对整个轮播图页面进行分析
• 我们需要一个大容器box、一堆img、两个前后的按钮/图 以及一堆小点点 结构代码如下（之所以先在第一个img的a标签和第一个dot加类名active是为了让它先显示一个‘装装样子’）
  如果直接拿走代码，注意换一下img的路径哦~

<div class="box">
      <a href="javascript:;" class="active"><img src="./img/1.jpg" alt="第一张"/></a>
      <a href="javascript:;"><img src="./img/2.jpg" alt="第二张" /></a>
      <a href="javascript:;"><img src="./img/3.jpg" alt="第三张" /></a>
      <a href="javascript:;"><img src="./img/4.jpg" alt="第四张" /></a>
      <a href="javascript:;"><img src="./img/5.jpg" alt="第五张" /></a>
      <span class="prev" title="前一张"></span>
      <span class="next" title="后一张"></span>

      <div class="pages">
        <i class="active"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>

• 然后我们要对他的样式进行修改，给box进行相对定位让图片和小点点都要进行绝对定位 代码如下（后缀名active是为了实现js代码中激活用）

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        user-select: none;
        width: 1000px;
        height: 375px;
        margin: 10px auto;
        position: relative;
        cursor: pointer;
      }
      .box a {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 1s linear;
      }
      .box a.active {
        opacity: 1;
      }
      .box a img {
        width: 100%;
      }
      .prev,
      .next {
        background-image: url(./img/icons.png);
        background-repeat: no-repeat;
        display: inline-block;
        width: 41px;
        height: 69px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .box .prev {
        left: 10px;
        background-position: -85px 0;
      }
      .box .prev:hover {
        background-position: 0 0;
        left: 10px;
      }
      .box .next {
        right: 10px;
        background-position: -126px 0;
      }
      .box .next:hover {
        background-position: -43px 0;
      }
      .box .pages {
        position: absolute;
        right: 20px;
        bottom: 10px;
      }
      .box .pages i {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid pink;
      }
      .box .pages i:hover,
      .box .pages i.active {
        background-color: pink;
        border: 1px solid #fff;
      }
    </style>

重点来了！！！！JS部分

• js主要实现点击prev和next按钮能够跳转到下一张，要注意判断是不是到最后一张/第一张。然后给dot绑定点击事件。这时候取个巧，图片的数量和点点的数量相同，所以我们可以直接根据图片的索引来绑定点点的索引哦~
  代码如下：

<script>
      var box = document.querySelector(".box");
      var imgs = document.querySelectorAll(".box a");
      var prev = document.querySelector(".prev");
      var next = document.querySelector(".next");
      var dots = document.querySelectorAll(".pages i");
      var index = 0;//先默认索引为第一张的位置
      next.onclick = function (e) {
        showImg(index, e);
      };
      prev.onclick = function (e) {
        showImg(index, e);
      };
      for (let i = 0; i < dots.length; i++) {
        dots[i].addEventListener("click", function (e) {
          showImg(i, e);
        });
      }
      //因为代码重复了很多，于是进行了封装，是代码更简洁。
      function showImg(idx, e) {
        //   注意判断条件。 前一张 后一张 小点点 
        if (e.target.classList.contains("prev")) {
          idx === 0 ? (index = imgs.length - 1) : index--;
        } else if (e.target.classList.contains("next")) {
          idx === imgs.length - 1 ? (index = 0) : index++;
        } else {
          index = idx;
        }
        //这个是一段三目运算符的写法。不用弄混了。
        imgs.forEach((v,i)=>{
            i === index ? (v.classList.add("active"),dots[i].classList.add("active"))
            : (v.classList.remove("active"),dots[i].classList.remove("active"))
        })
      }
	//定义一个延时，为了让轮播图自动变化。鼠标进入box清除定时器
	//！！！！注意不能用setTimeout（）因为它只能间隔一段时间执行一次。
	//我们的目的是想让他无线轮播
      var timer = setInterval(function(){
          next.click();
      },2000)
      box.onmouseover = function(){
          clearInterval(timer)
      }
      //鼠标离开轮播继续
      box.onmouseout = function(){
        timer = setInterval(function(){
            next.click()
        },2000)
      }
    </script>