JavaScript图片轮播淡入淡出过渡效果不生效问题求助

• 实现逻辑与样式规则不匹配：你定义的淡入淡出过渡绑定了.slide类，但现有JS仅修改#mainDisplayImg的src属性，完全没有操作下方带.slide类的图片节点，过渡规则不会被触发。
• 过渡触发条件被阻断：所有.slide类图片都加了行内display: none样式，display属性的切换无法触发CSS过渡，且隐藏状态的元素也无法渲染过渡动画。
• 下标循环逻辑错误：index > 1 ? index = 0 : index++的逻辑只能循环前2张图片，和你定义的4元素图片数组不匹配，无法遍历所有资源。
• 布局缺少层叠设置：.mainDisplay下的图片没有设置绝对定位层叠，就算正确切换类名，也只会出现普通的排列切换，看不到叠化效果。

直接采用多图叠层切换active类的方案实现淡入淡出，调整后代码如下：

HTML 调整 #

删除冗余的首图节点，移除所有.slide节点的行内display: none：

<div class="mainDisplay">
  <img class="slide active" src="Img1.jpg">
  <img class="slide" src="Img2.jpg">
  <img class="slide" src="Img3.jpg">
  <img class="slide" src="Img4.jpg">
  <img class="slide" src="Img5.jpg">
</div>

CSS 调整 #

给.slide增加绝对定位实现层叠，调整通用样式避免冲突：

.mainDisplay {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 2%;
  width: 100%;
  height: 600px;
}

.slide {
  position: absolute;
  width: 75%;
  height: 600px;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.active {
  opacity: 1;
  z-index: 2;
}

JavaScript 调整 #

改为遍历所有.slide节点切换类名实现过渡：

const slides = document.querySelectorAll('.slide');
let index = 0;
const totalSlides = slides.length;

function change() {
  slides[index].classList.remove('active');
  index = (index + 1) % totalSlides;
  slides[index].classList.add('active');
}

window.onload = function() {
  setInterval(change, 5000);
};

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