实现堆叠图片的循环切换动画并添加平滑过渡效果

原代码的问题在于：

• 使用display: none/block切换图片，这个属性不支持CSS过渡，会导致图片突然出现/消失
• 过渡属性设置时机错误，且transitionDelay设为2.5s和定时器周期一致，完全看不到过渡效果
• 初始状态下所有图片都被隐藏，没有正确的初始展示逻辑

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

HTML（结构不变，仅调整CSS控制逻辑） #

<div class="p-centered">
  <img src="https://picsum.photos/200?1" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?2" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?3" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?4" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?5" class="img-responsive mySlides" alt="">
</div>

CSS（核心：让图片重叠，添加过渡效果） #

.p-centered {
  position: relative; /* 作为图片定位的容器 */
  width: 200px; /* 和图片宽度一致 */
  height: 200px; /* 和图片高度一致 */
}

.mySlides {
  position: absolute; /* 让所有图片重叠在同一位置 */
  top: 0;
  left: 0;
  opacity: 0; /* 默认透明 */
  transition: opacity 0.8s ease; /* 平滑过渡透明度 */
}

.mySlides.active {
  opacity: 1; /* 激活状态下完全显示 */
}

JavaScript（简化逻辑，只控制激活类的切换） #

let slideIndex = 0;
const slides = document.querySelectorAll(".mySlides");

// 初始显示第一张图
slides[slideIndex].classList.add("active");

function showSlides() {
  // 移除当前图片的激活类
  slides[slideIndex].classList.remove("active");
  
  // 更新索引
  slideIndex = (slideIndex + 1) % slides.length;
  
  // 添加下一张图片的激活类
  slides[slideIndex].classList.add("active");
  
  // 定时器控制切换间隔（过渡时长0.8s，所以间隔设为3s，让图片停留2.2s）
  setTimeout(showSlides, 3000);
}

// 启动轮播
setTimeout(showSlides, 3000);

关键修改说明： #

• 用position:absolute让所有图片重叠在容器内，避免display属性切换带来的突兀感
• 把过渡效果写在CSS里，确保所有图片都默认拥有过渡属性，不用JS动态添加
• 通过切换active类控制图片透明度，实现平滑淡入淡出
• 调整定时器间隔为3s，其中0.8s是过渡时间，剩下2.2s是图片停留时间，逻辑更合理

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