为你的HTML/JavaScript轮播图添加滑动效果-html教程-PHP中文网

为你的HTML/JavaScript轮播图添加滑动效果

心靈之曲

发布： 2025-10-12 11:37:51

原创

384人浏览过

为你的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两个类，分别对应从右侧滑入和从左侧滑出的动画效果。

立即学习“Java免费学习笔记（深入）”；

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

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类。

<div class="mySlides">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="mySlides">
  <img src="image2.jpg" alt="Image 2">
</div>

登录后复制

完整示例代码

<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box}
body {font-family: nunito sans; margin: 0}
.mySlides {display: none;}
center > img {vertical-align: middle; height: 75vh; width: auto !important;}
.slideshow-container {max-width: 1250px; position: relative; margin: auto;}
.prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}
.next {right: 0; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(0, 0, 0, 0.8);}
.text {color: #FFFFFF; font-size: 22px; position: absolute; margin: 5px 0px; width: 100%; text-align: center;}
.numbertext {color: #ffffff; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}

.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%); }
}

@media only screen and (max-width: 300px) {
    .prev, .next, .text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container" width="100%">
  <div class="mySlides" style="display: block;">
    <center>
      <div class="numbertext">1 / 6</div>
      <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1896.16.jpeg" style="width:100%">
      <div class="text">HR Koopman postcard of 112th and Michigan, facing north, in 1896.</div>
    </center>
  </div>
  <div class="mySlides" style="display: none;">
    <center>
      <div class="numbertext">2 / 6</div>
      <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1900.34-1.jpeg" style="width:100%">
      <div class="text">HR Koopman photograph of workmen digging sewer system on 111th and Michigan in 1900.</div>
    </center>
  </div>
  <div class="mySlides" style="display: none;">
    <center>
      <div class="numbertext">3 / 6</div>
      <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1903.13.jpeg" style="width:100%">
      <div class="text">111th and Michigan in 1903 taken by HR Koopman.</div>
    </center>
  </div>
  <div class="mySlides" style="display: none;">
    <center>
      <div class="numbertext">4 / 6</div>
      <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1904.18.jpeg" style="width:100%">
      <div class="text">HR Koopman postcard showing a busy section of South Michigan Avenue on 113th street in 1904.</div>
    </center>
  </div>
  <div class="mySlides" style="display: none;">
    <center>
      <div class="numbertext">5 / 6</div>
      <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1909.12.jpeg" style="width:100%">
      <div class="text">Roseland celebrates its 60th anniversary with a huge parade on July 5th, 1909.</div>
    </center>
  </div>
  <div class="mySlides" style="display: none;">
    <center>
      <div class="numbertext">6 / 6</div>
      <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1910.24.jpeg" style="width:100%">
      <div class="text">HR Koopman photograph of 115th and Michigan in 1910 showing horse and buggies, a streetcar, and bicycles.</div>
    </center>
  </div>
</div>
<br>

<script>
let slideIndex = 1;

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

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");
}

// 自动播放
function runSlideShow() {
  plusSlides(1);
  setTimeout(runSlideShow, 2000);
}

setTimeout(runSlideShow, 2000);
</script>

</body>
</html>

登录后复制