修改W3Schools Y-axis过渡自动轮播后无法循环，寻求修复方案

你的代码核心问题在于：

1. 未隐藏已轮播过的项，最终所有slide都保持display:block和opacity:1状态，视觉上呈现停止效果
2. 动画未正确重置，循环时无法重新触发Y轴移动效果

以下是修复后的完整代码：

HTML（结构无需修改） #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* CSS 代码写在此处 */
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <img src="https://htmlcolorcodes.com/assets/images/colors/bright-blue-color-solid-background-1920x1080.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://htmlcolorcodes.com/assets/images/colors/charcoal-color-solid-background-1920x1080.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://htmlcolorcodes.com/assets/images/colors/teal-color-solid-background-1920x1080.png" style="width:100%">
</div>

</div>
<br>

<script>
// JS 代码写在此处
</script>

</body>
</html>

CSS 修改内容 #

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {
  display: none; 
  position: absolute;
  opacity: 0;
  transform: translateY(-100%);
}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  height: 500px; /* 固定容器高度，避免布局跳动 */
  overflow: hidden; /* 隐藏超出容器的轮播项 */
}

/* 激活状态：触发显示与动画 */
.mySlides.active {
  display: block;
  animation: slideDown 1s forwards;
}

@keyframes slideDown {
  from { opacity: .1; transform: translateY(-100%); } 
  to { opacity: 1; transform: translateY(0); }
}

JS 修改内容 #

let slideIndex = 0;
showSlides();

function showSlides() {
  const slides = document.getElementsByClassName("mySlides");
  
  // 重置所有轮播项状态
  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }
  
  slideIndex++;
  // 循环逻辑：超过最后一张则回到第一张
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }    
  
  // 激活当前轮播项
  slides[slideIndex - 1].classList.add("active");
  
  setTimeout(showSlides, 2000); // 每2秒切换一次
}

关键修改说明 #

1. CSS层面：

   • 给.mySlides设置默认隐藏和Y轴偏移状态，确保初始时所有轮播项在容器上方不可见
   • 使用.active类控制显示与动画触发，避免直接操作内联样式导致的状态混乱
   • 容器添加固定高度和overflow:hidden，防止轮播项偏移时影响页面布局

2. JS层面：

   • 每次轮播先重置所有项的状态，再激活当前项，确保视觉上仅显示一张轮播图
   • 保留循环逻辑，当slideIndex超出总数量时重置为1，实现无限循环

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