原生JS实现“没有上一张/下一张”的轮播图（函数封装）

上一期我分享了用原生JS实现轮播图，实际上轮播图功能并不全。我忘了轮播图还有一个功能，就是鼠标移入到图片上或者是小圆点上时，轮播图会停止图片的自动播放。

上一期我并没有考虑到这个问题，所以这一期便将这个一个小点补上。

这一期我以我正在做的项目为例，实现一个“没有上一张/下一张”的轮播图功能。由于我个人项目中有很多结构完全相同的轮播图，所以我决定将轮播图封装一下，通过用户给出上图框与下圆点ul的id值，便可实现轮播图。

具体代码如下

function homeCarousel(petCarBox, petCarDrop) {
  const carBox = document.querySelector(`#${petCarBox}`);
  const carDrop = document.querySelectorAll(`#${petCarDrop}>li`);

  // 图片每次移动的像素值 即图片的大小
  let left = -360;
  // 当前图片为第i+1张图片
  let i = 0;

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

  carDrop.forEach((li, index) => {
    li.onmouseover = function () {
      carDrop.forEach((li) => {
        li.classList.remove("active");
      });
      li.classList.add("active");
      i = index;
      carBox.style.marginLeft = left * i + "px";
      clearInterval(timer)
    };

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

  function nextImg(drop) {
    const li_active = document.querySelector(`#${drop}>li.active`);
    const li_next =
      li_active.nextElementSibling ||
      document.querySelector(`#${drop}>li:first-child`);
    li_next.onmouseover();
    timer = setInterval(() => nextImg(petCarDrop), 3000);
  }

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

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

其中petCarBox和petCarDrop是两个参数，均为字符串类型，分别为上图片框ul的id和下小圆点ul的id。

首先查询到两个id的DOM对象。

然后用forEach遍历小圆点ul的id的数组，给每一个小圆点绑定鼠标移入和鼠标移出事件。

其中利用"active'激活类，操纵小圆点移入后的样式，先清除所有小圆点的激活类，然后给当前小圆点增加激活类，同时利用forEach数组遍历得到的参数index定位图片，并清除定时器。

鼠标移出小圆点后开启定时器

然后创建下一张图片函数，传入参数为小圆点ul的id值。

首先查询到小圆点ul下的激活类所在的DOM对象，然后利用nextElementSibling选定其下一个兄弟元素（如果下一个兄弟元素为空，则利用逻辑或短路原理查询第一个小圆点元素）。然后执行鼠标移入小圆点事件。由于鼠标移入小圆点事件会清除定时器，所以我们要开启定时器。

然后我们利用周期定时器，将回调函数的返回值设置成下一张图片的函数。实现图片自动播放。

最后再补上鼠标移入图片框ul的鼠标移入和移出事件就完成了。

函数调用：

// 狗狗轮播图
homeCarousel('dogCarBox', 'dogCarDrop');

// 猫咪轮播图
homeCarousel('catCarBox','catCarDrop')

// 小宠轮播图
homeCarousel('mouseCarBox','mouseCarDrop')

// 水族轮播图
homeCarousel('fishCarBox','fishCarDrop')

// 爬虫轮播图
homeCarousel('goggaCarBox','goggaCarDrop')

注意：在使用封装函数时一定要注意加引号，我们需要传入的是图片框与小圆点框的id值，是字符串类型的参数，如果不加引号，则就变成传入DOM对象了，会报错！