轮播图秘籍：玩转JS定时器和事件监听

前端

2023-08-17 20:39:05

轮播图：用 JavaScript 点亮你的网页

引言

在数字世界的浩瀚海洋中，轮播图早已成为网页设计中不可或缺的一抹亮色。它们不仅能为网页增添美感和吸引力，还能有效传达信息。然而，要让轮播图动起来，我们需要借助 JavaScript 中两大法宝：定时器和事件监听。

JS 定时器：时间掌控大师

JS 定时器就像一个时间管理大师，能够精准控制动画切换的节奏，让轮播图源源不断地播放。

setInterval()： 定时器的利器，能够以指定的间隔时间重复执行某个函数，让轮播图流畅切换。
clearInterval()： 定时器的“暂停键”，可以随时停止正在执行的 setInterval()，让你在需要的时候让轮播图停下来。

事件监听：贴心管家

事件监听就像一位贴心的管家，时刻关注着用户的操作，及时响应他们的指令。

addEventListener()： 事件监听的“耳朵”，可以监听各种各样的事件，如鼠标点击、键盘输入等，并执行相应的函数。
removeEventListener()： 事件监听的“消音器”，能够取消之前添加的事件监听，让轮播图不再对某些事件做出响应。

轮播图切换实战

现在，让我们把 JS 定时器和事件监听组合起来，打造一个酷炫的轮播图切换效果。

// 假设轮播图元素的id为"myCarousel"
const carousel = document.getElementById("myCarousel");

// 获取轮播图中的所有图片元素
const images = carousel.getElementsByTagName("img");

// 当前显示图片的索引
let currentImageIndex = 0;

// 定时器，每3秒自动切换图片
const timer = setInterval(() => {
  // 将当前显示的图片隐藏
  images[currentImageIndex].style.display = "none";

  // 将下一个图片显示出来
  currentImageIndex = (currentImageIndex + 1) % images.length;
  images[currentImageIndex].style.display = "block";
}, 3000);

// 添加鼠标悬停事件监听器，停止自动切换
carousel.addEventListener("mouseover", () => {
  clearInterval(timer);
});

// 添加鼠标移出事件监听器，重新开始自动切换
carousel.addEventListener("mouseout", () => {
  timer = setInterval(() => {
    images[currentImageIndex].style.display = "none";
    currentImageIndex = (currentImageIndex + 1) % images.length;
    images[currentImageIndex].style.display = "block";
  }, 3000);
});