轮播图图片不显示通常因display:none未被覆盖或img的src为空；需在.slide.active中显式设置display:block（非inline），并检查src路径有效性、DOM结构合规性及缓存问题。
轮播图里图片不显示，八成不是 JavaScript 没跑起来，而是 CSS 或 HTML 层面卡在了最基础的渲染条件上——display: none 没被正确覆盖，或者 src 根本就是空的。
为什么 .slide.active 有 opacity: 1 却还是看不见图片
因为 .slide 默认设了 display: none，而 .slide.active 只加了 opacity: 1，没改 display。CSS 中 display: none 的优先级高于所有视觉属性，opacity、visibility、z-index 全部失效。
- 必须在
.slide.active规则中显式写上display: block（或flex/inline-block） - 别用
display: inline：会破坏width: 100%和height: 100%的继承，尤其当内部<img>设了height: 100%时，父容器塌陷导致图片压成一条线 - 检查是否误写了
eight: 100%—— 这是真实发生过的拼写错误，浏览器直接忽略该声明
图片路径为空或加载失败的典型表现
即使 CSS 修复完成，如果 <img src="">，页面依然空白。这不是样式问题，是资源缺失。
- 逐个检查每个
<img>的src属性：不能是空字符串、不能是纯空格、不能是未定义变量拼出来的无效路径 - 相对路径要对齐 HTML 文件位置：比如 HTML 在
/pages/index.html，图片在/images/banner1.jpg，那src应为../images/banner1.jpg - 本地双击打开 HTML 时，
file://协议下部分浏览器会拦截跨目录访问（尤其是含../的路径），建议用轻量服务器运行，比如 Python 的python -m http.server - 文件名含中文、空格或特殊字符（如
我的图片.jpg）容易触发编码异常，临时改用banner1.jpg测试
轮播结构中容易被忽略的 DOM 前提
JavaScript 控制类名切换的前提，是 DOM 已就绪且结构合规。否则 slides[0].classList.add("active") 执行了，但目标元素根本不存在或类型不对。
立即学习“前端免费学习笔记（深入）”；
-
.slide必须是直接子元素，且全部包裹在同一个父容器（如.slideshow-container）内；嵌套层级错乱会导致document.querySelectorAll(".slide")拿不到全部节点 - 确保首张图的
<div class="slide">内确实包含一个<img>，而不是只留了占位注释或空标签 - 不要依赖
window.onload初始化轮播：它等全部资源（包括图片）加载完才触发，可能造成首屏白屏或延迟激活；改用DOMContentLoaded更稳妥 - 若用了 Swiper 等第三方库，确认
.swiper-slide类名拼写完全一致（比如写成swipe-slide就不会生效）
真正卡住轮播图显示的，往往不是过渡动画或自动播放逻辑，而是那个被遗忘的 display: block，或是 src 里一串空引号。修完记得刷新前清掉缓存——浏览器有时会固执地复用旧的 CSS 或 404 响应。
