为HTML/JavaScript幻灯片添加滑动效果-html教程-PHP中文网

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

霞舞

发布： 2025-10-13 10:35:01

原创

481人浏览过

为html/javascript幻灯片添加滑动效果

本文档旨在指导开发者如何为现有的HTML/JavaScript幻灯片添加滑动进入和滑动退出效果。我们将通过动态切换CSS类的方式，实现图片的平滑过渡，从而提升用户体验。本文将提供详细的代码示例和步骤说明，帮助你轻松实现这一功能。

实现滑动效果的核心思路

核心思路在于利用CSS的animation属性，定义滑动进入（slide-in）和滑动退出（slide-out）的动画效果。然后，通过JavaScript动态地为幻灯片元素添加或移除这些CSS类，从而触发相应的动画。

步骤详解

CSS动画定义

首先，需要在CSS中定义slide-in和slide-out这两个动画类。以下是一个示例：

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

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

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

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

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

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

登录后复制

这段代码定义了从右侧滑入（slide-in）和向左侧滑出（slide-out）的动画效果。你可以根据自己的需求调整动画的方向、持续时间和缓动函数。

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

JavaScript代码修改

接下来，需要在JavaScript代码中修改showSlides函数，以便在显示新幻灯片时添加slide-in类，在隐藏旧幻灯片时添加slide-out类。

幻舟AI

专为短片创作者打造的AI创作平台

173

查看详情

   function showSlides(n) {
       var i;
       var slides = document.getElementsByClassName("mySlides");
       if(n > slides.length) {
           slideIndex = 1
       }
       if(n < 1) {
           slideIndex = slides.length
       }

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

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

       // 显示新的幻灯片
       let slideToShow = slides[slideIndex - 1];
       slideToShow.style.display = "block";

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

       slideToShow.classList.add("slide-in");
       slideToShow.classList.remove("slide-out");
   }

登录后复制

这段代码首先找到当前显示的幻灯片（slideToHide），然后隐藏所有幻灯片。接着，显示新的幻灯片（slideToShow），并为slideToShow添加slide-in类，为slideToHide添加slide-out类。

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>

登录后复制

完整示例代码

以下是一个完整的示例代码，包含了HTML、CSS和JavaScript：

<!DOCTYPE html>
<html>
<head>
<title>幻灯片滑动效果</title>
<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;
}
/* Next & previous buttons */
.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;
}
/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
    color: #FFFFFF;
    font-size: 22px;
    position: absolute;
    margin: 5px 0px;
    width: 100%;
    text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
    color: #ffffff;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Fading animation */
.slide-in {
    -webkit-animation-name: slide-in;
    -webkit-animation-duration: 1.5s;
    animation-name: slide-in;
    animation-duration: 1.5s;
}

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

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

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

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

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


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

<div class="slideshow-container">

<div class="mySlides" style="display: block;">
  <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1896.16.jpeg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides">
  <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1900.34-1.jpeg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides">
  <img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1903.13.jpeg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>

<script>
let slideIndex = 0;

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

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

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

    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}

    // 显示新的幻灯片
    let slideToShow = slides[slideIndex - 1];
    slideToShow.style.display = "block";

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

    slideToShow.classList.add("slide-in");
    slideToShow.classList.remove("slide-out");

    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

showSlides(); // Start the slideshow
</script>

</body>
</html>

登录后复制