幻灯片图库图片显示约2秒后消失问题求助

问题概述 #

我们刚完成大学基础编程学习，正在为项目搭建幻灯片图库，尝试实现超出当前水平的效果。在Live Server中运行时，幻灯片图片仅短暂显示约2秒后消失，图片相对路径正确（曾短暂显示）。我们已排查HTML/JavaScript、调整CSS属性、修改淡入动画、移除Bootstrap脚本、更换浏览器等，但问题未解决。疑问包括：

• 是否要求所有图片尺寸相近？
• 是否应将图片CSS设置为像素单位而非百分比？
• gallery-container的position:relative、width:100%、max-height:75%属性是否与图片不兼容？

核心疑问解答 #

1. 图片尺寸是否需要相近？
   不是强制要求，但尺寸相近能避免容器高度频繁变化，提升视觉体验，不会直接导致图片消失。

2. 是否要改用像素单位？
   百分比单位本身无问题，只要容器有明确的尺寸参照即可，问题根源不在单位选择上。

3. gallery-container的属性是否冲突？
   这些属性本身不冲突，但max-height:75%需要父元素有明确高度（否则该设置无效），可能引发布局异常，但不会直接导致图片消失。

具体解决步骤 #

1. 修复Bootstrap布局类缺失问题 #

HTML中使用了container、row、col-4等Bootstrap栅格类，但你移除了Bootstrap CSS，导致这些类无样式，布局混乱。两种解决方式：

• 重新引入Bootstrap CSS；
• 替换为自定义布局样式，例如给.col-4添加：

.col-4 {
  width: 33.33%;
  margin: 0 auto;
}

2. 修复淡入动画的状态保持 #

当前fade动画结束后会回到初始状态，添加animation-fill-mode: forwards确保动画结束后保持最终opacity：

.fade {
  animation-duration: 1.5s;
  animation-name: fade;
  animation-fill-mode: forwards; /* 新增：保持动画最终状态 */
}

3. 统一图片自适应设置 #

避免单张图片高度属性不一致导致的布局异常，给图片添加统一样式：

img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持图片比例，防止拉伸变形 */
}

4. 修正指示器hover样式 #

CSS中误写为.dot:hover，但HTML中类名为indicator，修改为：

.active, .indicator:hover {
  background-color: #717171;
}

5. 调整容器高度参照 #

将gallery-container的max-height:75%改为max-height:75vh（相对于视口高度），确保有明确的高度参照：

.gallery-container {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 75vh; /* 修改为视口高度百分比 */
  overflow: hidden; /* 防止图片溢出容器 */
}

额外排查建议 #

• 打开浏览器开发者工具（F12），查看控制台是否有JS报错；
• 在showSlides函数中添加console.log(slideIndex)，确认函数是否被意外调用；
• 图片消失后，检查.gallery元素的display和opacity属性，确认是被隐藏还是透明度变化；
• 验证gallery-container的实际高度，确认max-height设置是否生效。

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