用原生JS实现没有“上一张/下一张”的轮播图

在最近的学习中，我学到了轮播图的运用。实际上轮播图的实现手段有很多。最近的DOM学习中，我学习到了用自定义属性实现全套的轮播图。（轮播图的自动换图、下一张上一张、小圆点图片定位）。

全套的轮播图中书写的顺序是，先写“小圆点图片定位”利用到鼠标移入事件来达成图片定位，然后写“上一张下一张”，其中利用“nextElementSibling”与“previousElementSibling”方法实现下一张与上一张的定位，之后用代码调用鼠标移入事件，实现下一张上一张点击事件换图效果。最后再利用周期定时器，每隔数秒用代码调用下一张的点击事件，实现图片自动播放。

以上是轮播图最简单的实现顺序。

但是有些网页效果中并没有这么全套的效果。如一些网站的局部小型轮播图，没有上一张下一张按钮。这时，再按这个顺序实现轮播图会卡住，因为此顺序是一步一步进行的。

我分享一下我的轮播图思路。

轮播图中，实现图片的切换效果中有很多方法。其中用CSS中的变换位移方法，结合自定义属性最为简单。

我接下来要分享的是最经典marginLeft设置负值的方法实现轮播的。

以下为HTML代码

<div class="carousel" >
    <!-- 轮播图图片盒子 -->
    <div class="car-i">
        <ul id="dogCarBox">
            <li>
                <a href="#">
                    <img src="../img/home/bot-img/dog-car1.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
    <!-- 轮播图定位小圆点 -->
    <ul id="dogCarDrop" class="car-d">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
</div>

 CSS代码就不分享了，我用的是弹性盒子进行布局的。

以下是JS代码。

function homeCarousel(carBox,carDrop) {
  // 图片每次移动的像素值 即图片的大小
  let left = -360;
  // 当前图片为第i+1张图片
  let i = 0;

  // 创建自动播放函数
  function run() {
    if (i >= 2) {
      i = 0;
    } else {
      i++;
    }
    carBox.style.marginLeft = left * i + "px";
    carDrop.forEach(li => {
      li.classList.remove("active");
    });
    carDrop[i].classList.add("active");
  }

  // 用周期定时器调用run函数
  let timer = setInterval(run, 3000);

  // 为所有圆点li 绑定鼠标移入和移出事件
  carDrop.forEach((li, index) => {
    // 鼠标移入li
    // 先清除li的所有 active类，然后给当前li添加 active类
    // 给i赋值，定位图片位置
    // 清除定时器
    li.onmouseover = function () {
      carDrop.forEach((li) => {
        li.classList.remove("active");
      });
      this.classList.add("active");
      i = index;
      carBox.style.marginLeft = left * i + "px";
      clearInterval(timer);
    };

    // 鼠标移出  启动定时器
    li.onmouseout = function () {
      timer = setInterval(run, 3000);
    };
  });

  // 鼠标移入外框ul 清除定时器
  carBox.onmouseover = function () {
    clearInterval(timer);
  };

  // 鼠标移出外框ul 启动定时器
  carBox.onmouseout = function () {
    timer = setInterval(run, 3000);
  };
  
}

// 狗狗轮播图
const dogCarBox = document.querySelector("#dogCarBox");
const dogCarDrop = document.querySelectorAll("#dogCarDrop li");
homeCarousel(dogCarBox,dogCarDrop)

// 猫咪轮播图
const catCarBox = document.querySelector("#catCarBox");
const catCarDrop = document.querySelectorAll("#catCarDrop li");
homeCarousel(catCarBox,catCarDrop)

// 小宠轮播图
const mouseCarBox = document.querySelector("#mouseCarBox");
const mouseCarDrop = document.querySelectorAll("#mouseCarDrop li");
homeCarousel(mouseCarBox,mouseCarDrop)

// 水族轮播图
const fishCarBox = document.querySelector("#fishCarBox");
const fishCarDrop = document.querySelectorAll("#fishCarDrop li");
homeCarousel(fishCarBox,fishCarDrop)

// 爬虫轮播图
const goggaCarBox = document.querySelector("#goggaCarBox");
const goggaCarDrop = document.querySelectorAll("#goggaCarDrop li");
homeCarousel(goggaCarBox,goggaCarDrop)

由于我在写的小项目中，有用到多个结构类似轮播图，所以我将轮播图封装成了函数，以便复用代码。

我其中定义了left（每张图片的宽度，取负值），i（第i+1张图片）。

然后利用li.active，已经DOM方法中classList中的remove与add方法来移除或添加active类。

遍历数组运用的方法是forEach。

本方法没有使用自定义元素，而且使用的是marginLeft的方法控制图片轮换。稍显有些复杂。下一期我将进一步优化我的轮播图，使用自定义属性来控制变换位移样式的方法来实现轮播图。