JavaScript 轮播图教程：添加动画效果

原生JS实现轮播图--第二章动画实现

在上一节中，我们已经完成了轮播图的基本结构和样式。本节我们将添加动画效果，让轮播图更具动感。

实现轮播图的动画效果，主要有以下几点：

• 使用定时器 setInterval 或 setTimeout 实现图片的自动滚动。
• 使用平滑过渡来实现图片之间的切换。
• 添加点击事件，以便用户可以改变图片的展示顺序。

图片自动滚动

要实现图片的自动滚动，可以使用 setInterval 或 setTimeout 定时器。setInterval 定时器会每隔一段时间执行一次指定的函数，而 setTimeout 定时器则会延迟一段时间后执行指定的函数。

let slideIndex = 1;
const slides = document.querySelectorAll(".slide");
const dots = document.querySelectorAll(".dot");

const showSlides = (n) => {
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }

  slides.forEach((slide) => {
    slide.style.display = "none";
  });
  dots.forEach((dot) => {
    dot.classList.remove("active");
  });

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].classList.add("active");
};

const nextSlide = () => {
  showSlides(slideIndex + 1);
};

const prevSlide = () => {
  showSlides(slideIndex - 1);
};

setInterval(nextSlide, 5000); // 每5秒自动切换到下一张图片

在上面的代码中，我们使用了 setInterval 定时器来实现图片的自动滚动。定时器每隔 5 秒执行一次 nextSlide() 函数，从而将轮播图切换到下一张图片。

图片切换动画

为了让图片之间的切换更加平滑，可以使用 CSS 过渡。CSS 过渡可以实现元素在一段时间内从一种状态过渡到另一种状态。

.slide {
  transition: all 0.5s ease-in-out;
}

在上面的代码中，我们为 .slide 类添加了 transition 属性。这个属性指定了元素在过渡时的持续时间和缓动函数。ease-in-out 缓动函数可以使元素在过渡时先加速，然后减速。

const showSlides = (n) => {
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }

  slides.forEach((slide) => {
    slide.style.display = "none";
  });
  dots.forEach((dot) => {
    dot.classList.remove("active");
  });

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].classList.add("active");
};

在上面的代码中，我们修改了 showSlides() 函数，以便在切换图片时添加 CSS 过渡。

用户点击事件

为了让用户可以改变图片的展示顺序，可以添加点击事件。

dots.forEach((dot, i) => {
  dot.addEventListener("click", () => {
    showSlides(i + 1);
  });
});

在上面的代码中，我们为每个 .dot 元素添加了点击事件。当用户点击某个 .dot 元素时，会调用 showSlides() 函数，并将该元素对应的图片索引作为参数传入。这样，用户就可以通过点击 .dot 元素来切换到相应的图片。

现在，我们就完成了一个带动画效果的轮播图。您可以将其添加到您的网站或应用程序中，以展示您的图片或其他内容。