如何延长W3Schools淡入淡出轮播图单张图片的显示时长？

我基于W3Schools的代码实现了带淡入淡出效果的图片轮播，想要将每张图片的显示时长延长至30秒到数分钟，仅用于Chrome浏览器作为展示屏使用。但直接修改setTimeout时长（例如改为90000毫秒）会出现图片重复的问题，调整CSS动画时长超过10秒也会产生显示异常，替换为setInterval同样无法解决。

原代码如下：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
    <div style="overflow: hidden; background-color: black; height: 100vh;">
        <div class="w3-content w3-section" style="object-fit: contain; max-width: 100%; position: center center;">
  <img class="mySlides w3-animate-fading" src="img_rr_01.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="img_rr_02.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="img_rr_03.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="img_rr_04.jpg" style="width:100%">
        </div>
    </div>
    <script>
        var myIndex = 0;
        carousel();

        function carousel() {
            var i;
            var x = document.getElementsByClassName("mySlides");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            myIndex++;
            if (myIndex > x.length) { myIndex = 1 }
            x[myIndex - 1].style.display = "block";
            setTimeout(carousel, 9000);
        }
    </script>
</body>
</html>

问题原因 #

W3CSS自带的w3-animate-fading类默认动画时长为10秒，且是无限循环的动画。当轮播切换间隔超过动画时长时，前一张图片的动画还未结束就触发下一次切换，导致多张图片的动画重叠，出现重复显示或异常闪烁的问题。同时原JS逻辑每次切换都直接隐藏所有图片再显示当前图，和动画时序不匹配，加剧了显示异常。

修改方案 #

1. 自定义淡入淡出动画：将动画拆分为“淡入-保持-淡出”三个阶段，仅在切换过程中执行淡入淡出，中间时段保持图片完全显示。
2. 调整JS逻辑：确保每张图片显示满设定时长后再触发切换，动画仅在切换时触发一次，避免重复执行。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<title>长时长图片轮播</title>
<style>
/* 自定义淡入淡出动画：1秒淡入，保持显示至切换前1秒，1秒淡出 */
.custom-fade {
  animation: customFading 2s forwards;
}

@keyframes customFading {
  0% { opacity: 0; }
  50% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

body {
  margin: 0;
  background-color: black;
  height: 100vh;
  overflow: hidden;
}

.slide-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mySlides {
  display: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>
<body>
  <div class="slide-container">
    <img class="mySlides" src="img_rr_01.jpg" alt="展示图片1">
    <img class="mySlides" src="img_rr_02.jpg" alt="展示图片2">
    <img class="mySlides" src="img_rr_03.jpg" alt="展示图片3">
    <img class="mySlides" src="img_rr_04.jpg" alt="展示图片4">
  </div>

  <script>
    let currentSlideIndex = 0;
    const slides = document.querySelectorAll(".mySlides");
    // 每张图片的显示时长（单位：毫秒），可修改为30000（30秒）或更大值
    const displayDuration = 30000;
    // 淡入淡出动画总时长（需和CSS中animation时长一致）
    const animationDuration = 2000;

    // 初始化显示第一张图片
    slides[currentSlideIndex].style.display = "block";

    function switchSlide() {
      // 给当前显示的图片添加淡出动画
      slides[currentSlideIndex].classList.add("custom-fade");

      // 等待动画结束后，隐藏当前图片并移除动画类
      setTimeout(() => {
        slides[currentSlideIndex].style.display = "none";
        slides[currentSlideIndex].classList.remove("custom-fade");

        // 更新到下一张图片
        currentSlideIndex = (currentSlideIndex + 1) % slides.length;
        // 显示下一张图片并添加淡入动画
        slides[currentSlideIndex].style.display = "block";
        slides[currentSlideIndex].classList.add("custom-fade");

        // 动画结束后移除类，避免下次切换重复触发
        setTimeout(() => {
          slides[currentSlideIndex].classList.remove("custom-fade");
        }, animationDuration);

        // 设定下一次切换的延迟
        setTimeout(switchSlide, displayDuration);
      }, animationDuration);
    }

    // 第一次切换延迟设定的显示时长
    setTimeout(switchSlide, displayDuration);
  </script>
</body>
</html>

关键修改说明 #

• 自定义的custom-fade动画仅在切换前后各执行1秒的淡入淡出，中间时段图片保持完全显示状态，避免无限循环动画导致的异常。
• JS逻辑拆分了切换步骤：先给当前图片添加淡出动画，等待动画结束后隐藏，再显示下一张图片并添加淡入动画，确保时序正确。
• 可通过修改displayDuration变量轻松调整每张图片的显示时长，从30秒到数分钟都能正常工作，适配Chrome浏览器的展示需求。

内容的提问来源于stack exchange，提问作者Jan