为你的HTML/JavaScript轮播图添加滑动效果_技术教程

本文将指导你如何使用HTML、CSS和JavaScript为你的轮播图添加炫酷的滑动（slide-in/slide-out）效果。我们将通过动态切换CSS类来实现图片的滑动进出，从而提升用户体验。本文提供详细的代码示例和步骤说明，帮助你轻松实现这一功能。

实现滑动效果的关键步骤

实现轮播图的滑动效果，核心在于使用JavaScript动态地添加和移除CSS类，从而触发CSS动画。以下是详细的步骤和代码示例。

1. CSS动画的定义

首先，我们需要定义控制滑动效果的CSS动画。在你的CSS样式表中，确保已经定义了slide-in和slide-out动画。

.slide-in {
    -webkit-animation-name: slide-in-right;
    -webkit-animation-duration: 1.5s;
    animation-name: slide-in-right;
    animation-duration: 1.5s;
}

.slide-out {
    -webkit-animation-name: slide-out-left;
    -webkit-animation-duration: 1.5s;
    animation-name: slide-out-left;
    animation-duration: 1.5s;
}

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

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

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

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

这段CSS代码定义了slide-in和slide-out两个类，分别对应从右侧滑入和从左侧滑出的动画效果。

2. JavaScript代码的修改

接下来，我们需要修改JavaScript代码，在显示新图片和隐藏旧图片时，动态地添加和移除这些CSS类。找到你的showSlides函数，并进行如下修改：

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");

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

    // 找到当前显示的slide
    let slideToHide;
    for(i = 0; i < slides.length; i++) {
        if(slides[i].style.display === "block") {
            slideToHide = slides[i];
            break;
        }
    }

    // 隐藏所有slide
    for(i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

    // 显示当前slide
    let slideToShow = slides[slideIndex - 1];
    slideToShow.style.display = "block";

    // 添加/移除动画类
    if (slideToHide) {
        slideToHide.classList.remove("slide-in");
        slideToHide.classList.add("slide-out");
    }
    slideToShow.classList.remove("slide-out");
    slideToShow.classList.add("slide-in");
}

这段代码首先找到当前显示的slide，然后在隐藏所有slide之前，为当前显示的slide添加slide-out类并移除slide-in类，为即将显示的slide添加slide-in类并移除slide-out类。

3. HTML结构的调整

确保你的HTML结构中，每个轮播图的元素都具有mySlides类。

  @@##@@


  @@##@@

完整示例代码









  
    
      1 / 6
      @@##@@
      HR Koopman postcard of 112th and Michigan, facing north, in 1896.
    
  
  
    
      2 / 6
      @@##@@
      HR Koopman photograph of workmen digging sewer system on 111th and Michigan in 1900.
    
  
  
    
      3 / 6
      @@##@@
      111th and Michigan in 1903 taken by HR Koopman.
    
  
  
    
      4 / 6
      @@##@@
      HR Koopman postcard showing a busy section of South Michigan Avenue on 113th street in 1904.
    
  
  
    
      5 / 6
      @@##@@
      Roseland celebrates its 60th anniversary with a huge parade on July 5th, 1909.
    
  
  
    
      6 / 6
      @@##@@
      HR Koopman photograph of 115th and Michigan in 1910 showing horse and buggies, a streetcar, and bicycles.