实现带淡入淡出效果的自动随机图片轮播求助

首先，先帮你梳理下现有代码里的小问题：

• 所有图片都用了同一个id="div2"，ID在HTML里必须是唯一的，这里只保留类名mySlides就足够了
• 缺少实现淡入淡出的CSS过渡样式，以及完整的随机切换逻辑

下面是完整的可运行代码，完美满足自动随机切换+淡入淡出平滑过渡的需求：

完整实现代码 #

HTML 结构 #

<center>
  <div class="slide-container">
    <img class="mySlides" src="animals.jpg" style="width:300px;height:300px;">
    <img class="mySlides" src="fly.jpg" style="width:300px;height:300px;">
    <img class="mySlides" src="three.jpg" style="width:300px;height:300px;">
  </div>
</center>

CSS 样式（实现淡入淡出） #

.slide-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out; /* 1秒的淡入淡出过渡动画 */
}

.mySlides.active {
  opacity: 1; /* 标记为当前显示的图片 */
}

JavaScript 逻辑（自动随机切换） #

const slides = document.querySelectorAll('.mySlides');
let currentIndex = 0;

// 初始化：默认显示第一张图片
slides[currentIndex].classList.add('active');

function switchRandomSlide() {
  // 先隐藏当前显示的图片
  slides[currentIndex].classList.remove('active');
  
  // 生成随机索引，确保不会重复切换到当前图片
  let newIndex;
  do {
    newIndex = Math.floor(Math.random() * slides.length);
  } while (newIndex === currentIndex);
  
  currentIndex = newIndex;
  // 显示新的随机图片
  slides[currentIndex].classList.add('active');
}

// 设置自动切换间隔（这里是3秒切换一次，可自行调整毫秒数）
setInterval(switchRandomSlide, 3000);

代码逻辑说明 #

• CSS部分：通过绝对定位让所有图片重叠在同一位置，利用opacity属性控制显示/隐藏，搭配transition实现平滑的淡入淡出效果；active类用来标记当前需要显示的图片。
• JavaScript部分：
  1. 先获取所有轮播图片元素，初始化显示第一张
  2. switchRandomSlide函数负责切换逻辑：先隐藏当前图片，再生成一个和当前索引不同的随机值，确保每次切换都是新的图片
  3. 用setInterval设置自动切换的时间间隔，实现无人工干预的自动轮播

这样就能轻松实现你想要的自动随机淡入淡出图片轮播效果啦！

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