JS使用定时器与事件监听实现轮播图切换功能

JS使用定时器与事件监听实现轮播图切换功能，是一个比较常见的前端开发需求，下面是一个完整的攻略：

步骤一：HTML结构

首先，我们需要用HTML搭建轮播图的基本结构。基本上，一个轮播图的结构通常是由一个容器元素，若干个图片轮播元素和若干个轮播导航元素组成的。以下是一个典型的轮播图HTML结构示例：

<div class="slider">
    <div class="slider-wrap">
        <div class="slider-item active">
            <img src="images/1.jpg" alt="轮播图1">
        </div>
        <div class="slider-item">
            <img src="images/2.jpg" alt="轮播图2">
        </div>
        <div class="slider-item">
            <img src="images/3.jpg" alt="轮播图3">
        </div>
        <div class="slider-item">
            <img src="images/4.jpg" alt="轮播图4">
        </div>
    </div>
    <div class="slider-nav">
        <div class="nav-item active"></div>
        <div class="nav-item"></div>
        <div class="nav-item"></div>
        <div class="nav-item"></div>
    </div>
</div>

步骤二：CSS样式

接着，我们需要给轮播图添加一些样式，包括轮播图容器和轮播导航的布局样式、轮播图片的布局样式、轮播图片的切换过渡动画样式等。以下是一个基本的轮播图CSS样式示例：

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  transition: transform .5s ease-in-out;
}

.slider-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 999;
}

.nav-item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  margin: 0 5px;
  cursor: pointer;
}

.nav-item.active {
  background-color: #fff;
}

.slider:hover .slider-nav {
  display: none;
}

步骤三：JS代码

最后，在轮播图结构和样式都设置好之后，我们需要使用JS来实现轮播图的切换功能。常用的实现方式有两种：定时器和事件监听。这里我们将介绍这两种方式的具体实现过程：

方式1：使用定时器实现轮播

使用定时器实现轮播图切换的方法，是利用setInterval()函数来实现自动切换图片。当然，我们也可以添加上清除轮播图定时器的逻辑，确保在用户操作轮播图时计时器不会继续执行。以下是一个基本的轮播图定时器实现代码示例：

const sliderWrap = document.querySelector(".slider-wrap");
const sliderItems = document.querySelectorAll(".slider-item");
const navItems = document.querySelectorAll(".nav-item");
const intervalTime = 5000; // 轮播时间间隔 5s
let currentIndex = 0;
let intervalId;

function resetClass() {
  sliderItems[currentIndex].classList.remove("active");
  navItems[currentIndex].classList.remove("active");
}

function changeSlide() {
  resetClass();
  if (currentIndex === sliderItems.length - 1) {
    currentIndex = 0;
  } else {
    currentIndex++;
  }
  sliderWrap.style.transform = `translateX(-${currentIndex * 100}%)`;
  navItems[currentIndex].classList.add("active");
  sliderItems[currentIndex].classList.add("active");
}

function startInterval() {
  intervalId = setInterval(changeSlide, intervalTime);
}

function stopInterval() {
  clearInterval(intervalId);
}

startInterval();

sliderWrap.addEventListener("mouseenter", stopInterval);
sliderWrap.addEventListener("mouseleave", startInterval);

方式2：使用事件监听实现轮播

使用事件监听实现轮播图切换的方法，是利用鼠标单击轮播导航来切换图片。当然，我们也可以添加上判断轮播导航和轮播图片的数量是否一致的逻辑，确保代码的健壮性和兼容性。以下是一个基本的轮播图事件监听实现代码示例：

const sliderWrap = document.querySelector(".slider-wrap");
const sliderItems = document.querySelectorAll(".slider-item");
const navItems = document.querySelectorAll(".nav-item");

function resetClass() {
  sliderItems.forEach((item) => {
    item.classList.remove("active");
  });
  navItems.forEach((item) => {
    item.classList.remove("active");
  });
}

function changeSlide(index) {
  resetClass();
  sliderWrap.style.transform = `translateX(-${index * 100}%)`;
  navItems[index].classList.add("active");
  sliderItems[index].classList.add("active");
}

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    changeSlide(index);
  });
});

总结

以上就是我们使用JS使用定时器与事件监听实现轮播图切换功能的完整攻略。在实际项目中，我们还可以继续优化代码、添加上鼠标滑动切换、添加上移动端轮播图等更多交互特效和功能。