原生JS实现轮播图

上一期，我分享了用原生JS，以marginLeft的方法实现了“没有上一页/下一页”的轮播图。

由于上一期的代码中，我的思路因为“没有上一页/下一页”的功能的原因，导致我实现轮播图的思路出现了偏差，使用的方法也是十分的麻烦，实现的顺序也不是最好的顺序。因此，这一期，我将分享一下实现轮播图时，更好的顺序。

这一期我不再采用marginLeft方法实现图片的切换，而是改用变换位移的方法实现。

轮播图的功能一般分为：自动换图，上一页/下一页，小圆点定位图片。

在开始之前，要先写好HTML和CSS代码。

我随机用了几个图片来举例子，重点是JS代码。

  <div class="banner">
    <div class="imgs">
      <img src="imgs/banner1.png" alt="">
      <img src="imgs/banner2.png" alt="">
      <img src="imgs/banner3.png" alt="">
      <img src="imgs/banner4.png" alt="">
    </div>
    <!-- 页数指示点 -->
    <ul>
      <li data-x="0" class="active"></li>
      <li data-x="-100%"></li>
      <li data-x="-200%"></li>
      <li data-x="-300%"></li>
    </ul>

    <div class="btns">
      <button class="prev">上一页</button>
      <button class="next">下一页</button>
    </div>
  </div>

我们要为每个小圆点li添加自定义属性，用于储存每个图片的位置，也就是想要切换到对应的图片时，应该在变换 transform：translateX（）中填入什么值。

CSS代码

    .banner{
      width: 600px;
      overflow: hidden;
      border: 2px solid green;
      position: relative;
    }
    .banner>.btns{
      width: 100%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
    }
    .banner>.imgs{
      display: flex;
      transition: 0.3s;
    }
    .banner>.imgs img{
      width: 100%;
    }
    .banner>ul{
      display: flex;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    .banner>ul>li{
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
      margin: 4px;
      cursor: pointer;
    }
    .banner>ul>li.active{
      background-color: #0aa1ed;
    } 

我们需要一个激活类"active"。

用来改变被选中的小圆点的样式的改变，默认初始为第一个小圆点有"active"。

接下来就是JS代码部分。

JS部分首先要实现的就是给每一个小圆点绑定鼠标移入事件，移出所有小圆点的"active"类，为当前小圆点添加"active"类。

然后将对应小圆点存储的自定义属性的值用于定位图片变换的值。

    const lis = document.querySelectorAll('li')
    lis.forEach(li=>{
      li.onmouseover = function(){
        lis.forEach(li=>{
          li.classList.remove('active')
        })
        li.classList.add('active')

        const imgs = document.querySelector('.banner>.imgs')
        const x = li.dataset.x
        imgs.style.transform = `translateX(${x})`
      }
    })

实现：上一页/下一页功能

const btn_prev = document.querySelector('button.prev')
const btn_next = document.querySelector('button.next')
btn_next.onclick = function(){
   // 当前激活小圆点的 下一个点
   const li_active = document.querySelector('.banner li.active')
   // 下一个元素兄弟元素的方法
   const li_next = li_active.nextElementSibling || document.querySelector('.banner li:first-child')
   // 通过代码方式，触发元素的鼠标移入事件
   li_next.onmouseover()
}
btn_prev.onclick = function(){
   const li_active = document.querySelector('.banner li.active')
   const li_prev = li_active.previousElementSibling || document.querySelector('.banner li:last-child')
   li_prev.onmouseover()
}

本功能利用的是nextElementSibling与previousElementSibling的方法，来定位当前元素的下一个/上一个兄弟元素。我们还要设置，如果没有下一个/上一个兄弟元素，则返回第一个/最后一个元素。然后手动触发这个元素的鼠标移入事件。

最后实现图片的自动播放。

setInterval(()=>{
   btn_next.onclick()
}, 4000);

图片的自动播放是使用周期定时器，每隔数分钟便调用一次按钮“下一张”的点击事件。