使用 HTML/JavaScript 为幻灯片添加滑动效果

本文将指导你如何使用 HTML、CSS 和 JavaScript 为幻灯片添加平滑的滑动进入和滑动退出效果。我们将通过动态切换 CSS 类来实现动画效果，使幻灯片切换更加流畅自然。本文包含详细的代码示例和步骤说明，帮助你轻松实现这一功能。

1. HTML 结构

首先，我们需要一个包含幻灯片的 HTML 结构。每个幻灯片都应该有一个容器，例如 div，并且拥有一个唯一的类名，例如 mySlides。

  
    
      1 / 6
      @@##@@
      Caption 1
    
  
  
    
      2 / 6
      @@##@@
      Caption 2
    
  
  

2. CSS 样式

接下来，定义 CSS 样式来控制幻灯片的显示和动画效果。关键在于定义 slide-in 和 slide-out 动画，并将其应用于幻灯片。

.mySlides {
  display: none; /* 初始状态隐藏所有幻灯片 */
}

.slide-in {
  animation: slide-in-right 0.5s ease-in-out forwards; /* 从右侧滑入 */
}

.slide-out {
  animation: slide-out-left 0.5s ease-in-out forwards; /* 从左侧滑出 */
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

说明：

• .mySlides 初始状态设置为 display: none，确保所有幻灯片默认隐藏。
• .slide-in 和 .slide-out 分别定义了滑入和滑出动画。forwards 关键字确保动画完成后，元素保持最终状态。
• @keyframes 定义了动画的具体过程。slide-in-right 从右侧滑入，slide-out-left 从左侧滑出。可以根据需要调整动画时间和方向。

3. JavaScript 代码

现在，使用 JavaScript 来控制幻灯片的切换和动画效果。我们需要修改 showSlides 函数，在显示新幻灯片时添加 slide-in 类，并在隐藏旧幻灯片时添加 slide-out 类。

let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove("slide-in"); // 移除 slide-in 类
    slides[i].classList.add("slide-out");  // 添加 slide-out 类
    setTimeout(() => { // 添加延迟，确保动画播放完毕后再隐藏
      slides[i].style.display = "none";
      slides[i].classList.remove("slide-out"); // 动画完成后移除 slide-out 类
    }, 500); // 延迟时间与 CSS 动画时间一致
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  slides[slideIndex-1].classList.remove("slide-out"); // 移除 slide-out 类
  slides[slideIndex-1].classList.add("slide-in");   // 添加 slide-in 类
  setTimeout(showSlides, 3000); // Change image every 3 seconds
}

代码解释：

1. showSlides() 函数：

   • 首先，获取所有 mySlides 元素。
   • 循环遍历所有幻灯片，移除 slide-in 类，并添加 slide-out 类。
   • 使用 setTimeout 函数延迟执行隐藏幻灯片的操作，确保 slide-out 动画播放完毕后再隐藏。延迟时间应与 CSS 动画的持续时间一致。
   • 然后，显示下一张幻灯片，移除 slide-out 类，并添加 slide-in 类，使其滑入。
   • 最后，使用 setTimeout 函数设置定时器，定期调用 showSlides() 函数，实现自动播放。

2. 动态类名切换：

   • element.classList.add("className")：向元素添加指定的 CSS 类名。
   • element.classList.remove("className")：从元素移除指定的 CSS 类名。

完整示例：

  1 / 3
  @@##@@
  Caption Text



  2 / 3
  @@##@@
  Caption Two



  3 / 3
  @@##@@
  Caption Three


❮
❯






  
  
  

注意事项：

• 确保 CSS 动画的持续时间和 JavaScript 代码中的延迟时间一致，以避免动画效果出现问题。
• 可以根据需要调整动画效果，例如改变动画方向、速度和缓动函数。
• 可以使用不同的 CSS 类名来定义不同的动画效果，并在 JavaScript 代码中动态切换这些类名。

4. 总结

通过本文，你学习了如何使用 HTML、CSS 和 JavaScript 为幻灯片添加滑动效果。关键在于使用 CSS 定义动画，并使用 JavaScript 动态切换 CSS 类名，从而实现平滑的幻灯片切换效果。希望本文能帮助你更好地掌握前端开发技术。