直接上手就能跑的轮播图核心是：结构用<div class="carousel">包独立<img>并设固定高度；显示逻辑统一初始化display:none，切换时先全隐再单显；定时器必须用clearInterval清理后再设，避免堆积失控。
轮播容器和图片结构怎么写才不踩坑
最稳妥的 HTML 结构是用 <div class="carousel"> 包住一组独立的 <img>，每张图带 alt 和明确宽高（比如 width="600" height="400"）。不要把多张图塞进一个 src，src 只认单个 URL；也别一上来就用 <picture> 或 <source>，响应式留到后面加。
常见错误现象：
– 所有图片垂直堆叠在页面上
– 点按钮没反应，或切到第二张时第一张还露半截
– 容器高度忽大忽小，页面跳动
- 容器必须设固定高度（如
height: 400px），否则display: none切换会触发重排 -
<img>不要嵌在<figure>或<a>里——除非你明确需要语义化或跳转，否则纯图更可控 - 别用
<ul><li><img></li></ul>套图——li默认有 margin/padding，容易干扰布局
用 display: none 切换图片时的关键细节
这是初学者最该稳住的第一步：不是动画有多顺，而是“只有一张图在显示”这件事必须 100% 可靠。用 style.display = "block" / "none" 是最快路径，比 opacity 或 transform 更直白、更少兼容性问题。
- 所有
<img>初始化时统一设style="display: none;"，第一张额外加style="display: block;" - 切换函数里，一定先遍历全部图片设
display: none，再设目标索引为block——顺序反了就会残留 - 别用
visibility: hidden替代：它占位，可能撑开容器高度；也别用opacity: 0：透明但依然响应点击，且需额外加transition - 如果用类名控制（如
.active），CSS 里必须写死.carousel img { display: none; }+.carousel img.active { display: block; }，不能只靠 JS 切类
setInterval 自动轮播为什么总出问题
只写 setInterval(next, 3000) 是危险操作。用户点一次按钮，定时器还在跑；鼠标悬停时还在切；切完第2张，0.5秒后又自动切到第3张——这不是轮播，是失控。
立即学习“前端免费学习笔记（深入）”；
- 必须定义全局变量
let carouselTimer = null，每次调用setInterval前先clearInterval(carouselTimer) -
mouseenter时清定时器，mouseleave时重新启动（移动端可跳过） - 左右按钮的
click回调末尾也要调用重置函数（如resetTimer()），否则手动切图后立刻被自动逻辑覆盖 - 别用
setTimeout递归模拟轮播——不好清理，且容易因 JS 阻塞导致延迟累积
图片加载失败时轮播图不塌陷的底线方案
本地调试好好的，一上线就变一条细线——大概率某张图 404 或跨域被拒，<img> 加载失败后高度为 0，整个 .carousel 就塌了。
- 给每张
<img>加onerror处理：例如onerror="this.style.display='none';"，避免空白图占位 - 给
.carousel设最小高度（min-height: 400px），兜底防塌 - 服务端确保图片路径正确、CORS 配置无误；开发时可用
curl -I 图片URL快速验证 HTTP 状态码 - 若用 SVG 占位，加
fallback属性或内联<svg>，比空<img>更可控
