你的轮播图在点击切换后几秒内消失，根本原因是 Bootstrap 5 的 .fade 类与自定义轮播逻辑冲突——当元素未添加 .show 类时，.fade:not(.show) 规则会强制将其透明度设为 0，导致视觉上“消失”。

你的轮播图在点击切换后几秒内消失，根本原因是 bootstrap 5 的 `.fade` 类与自定义轮播逻辑冲突——当元素未添加 `.show` 类时，`.fade:not(.show)` 规则会强制将其透明度设为 0，导致视觉上“消失”。

在开发基于原生 JavaScript 的图片轮播组件时，若项目中已引入 Bootstrap 5（尤其是其 CSS 文件），一个极易被忽视却极具破坏性的冲突点就是其内置的 .fade 工具类样式。你提供的代码中，所有幻灯片容器均带有 class="mySlides fade" ——其中 fade 并非你自定义的动画类，而是 Bootstrap 5 官方预设的过渡类，其默认行为如下：

.fade:not(.show) {
  opacity: 0;
}

该规则意味着：任何拥有 fade 类但不同时具备 show 类的元素，都会被强制设为完全透明（opacity: 0）。而你的 JavaScript 逻辑仅通过 display: block/none 控制显隐，并未操作 show 类，因此当某张幻灯片被设为 display: block 后，它仍携带 fade 类但缺少 show，于是立即被 Bootstrap 的 CSS “静默覆盖”，表现为“闪现后消失”。

✅ 正确解决方案：三选一（推荐第一种）

✅ 方案一：移除冲突类名（最简洁可靠）

将 HTML 中所有幻灯片的 fade 类删除，仅保留语义化类名（如 mySlides），并用纯 CSS 实现淡入动画：

<!-- 修改前 -->
<div class="mySlides fade">...</div>

<!-- 修改后 -->
<div class="mySlides">...</div>

同时，在你的自定义 CSS（如 style.css）中补充淡入动画（替代 Bootstrap 的 .fade）：

/* 自定义淡入动画，仅作用于 mySlides */
.mySlides {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.mySlides.active {
  opacity: 1;
}

并在 JS 的 showSlide() 函数中同步切换 active 类：

function showSlide(n) {
  const slides = document.getElementsByClassName("mySlides");

  // 重置所有幻灯片
  for (let i = 0; i  0) {
    slides[n].style.display = "block";
    slides[n].classList.add("active"); // 添加 active 触发动画
  }
}

✅ 优势：彻底解耦 Bootstrap 样式干扰；动画可控性强；无需修改 Bootstrap 源码或全局覆盖。

⚠️ 方案二：强制覆盖 Bootstrap 样式（临时应急）

若因历史原因必须保留 fade 类，可在自定义 CSS 中提高特异性覆盖其默认行为：

/* 在 style.css 底部添加，确保优先级高于 Bootstrap */
.slideshow-container1 .mySlides.fade:not(.show) {
  opacity: 1 !important;
}

⚠️ 注意：!important 是反模式，仅建议用于快速验证或临时修复，长期维护中应避免。

❌ 方案三：向幻灯片添加 .show 类（不推荐）

虽技术上可行（slides[n].classList.add("show")），但会与 Bootstrap 其他组件（如 Modal、Collapse）的 show 类语义冲突，且违背“关注点分离”原则——轮播逻辑不应依赖第三方框架的内部类名。

? 额外检查建议

• 确保 <script> 标签使用 defer 或置于 </script>