三步实现轮播图：用包图片、display: none控显隐、setinterval自动切换；html用.carousel容器套.carousel-images，内含带宽高的img；js维护currentindex并统一showimage(index)，定时器需清理防堆积。
直接用 <div> 包图片、<code>display: none 控显隐、setInterval 做自动切换，三步就能跑起来。别一上来就套 Swiper 或写 transform 动画——结构没稳，动画只会放大 bug。
HTML 结构怎么搭才不踩坑
最简可行结构是：<div class="carousel"> 作外层容器，里面放一个 <code><div class="carousel-images">，所有 <code><img> 都是它的直接子元素，每张图带 alt 和明确宽高（如 width="600" style="max-width:90%"）。
- 别把图片塞进
<ul><li></ul>里再加样式——语义没错，但 JS 选中和遍历时多一层嵌套，初学易漏 - 绝对不要写
<img src="a.jpg,b.jpg,c.jpg">——src只接受单个 URL，这样写图根本不会加载 - 不用
<picture></picture>或<source></source>开局就搞响应式，先确保固定尺寸能切图 - 导航按钮用
<button type="button" data-index="0"></button>，不用<a></a>或<span></span>，避免默认跳转或焦点干扰
JS 切图逻辑怎么写才稳
核心就两件事：维护当前索引 currentIndex，以及用 showImage(index) 统一控制显隐。所有切换（自动、点击、左右箭头）最终都调这个函数。
- 初始状态：所有
<img>默认style="max-width:90%"，第一张手动设display: block - 切换时必须「先清空、再显示」：遍历所有
img，全部设display: none，再设目标项为display: block；顺序反了会导致两张图同时显示 - 别用
visibility: hidden替代display: none——它仍占布局空间，可能撑开容器高度，导致页面跳动 - 索引越界时用取余处理循环：
currentIndex = (currentIndex + 1) % imageCount，比 if-else 更简洁
自动轮播为什么总出问题
问题几乎都出在定时器没清理：setInterval 启动后不手动 clearInterval，用户点按钮、悬停、切页再回来，多个定时器并发运行，图片狂闪或假死。
- 定义全局变量
let carouselTimer = null，每次调setInterval前先clearInterval(carouselTimer) -
mouseenter时暂停（clearInterval），mouseleave时重启（重新赋值carouselTimer） - 手动点击按钮后也必须重置定时器——否则刚切到第 2 张，0.5 秒后又跳第 3 张
- 移动端没有 hover，
mouseenter/mouseleave可跳过，但需补touchstart暂停逻辑
图片加载失败时轮播图不塌陷
本地调试好好的，一上服务器就变一条细线——大概率某张图 404 或跨域被拒，<img> 加载失败后高度为 0，整个容器塌陷。
- 给
<img>加onerror回调，比如onerror="this.style.display='none'"，至少不让坏图占位 - 更稳妥的是给
.carousel设死高度，如height: 400px，避免依赖图片实际尺寸 - 若需响应式，用 CSS
aspect-ratio（现代浏览器支持）替代 JS 计算高度，减少 DOM 读取 - 别在
setInterval里直接写 DOM 操作，封装成函数再调，方便加错误边界和 fallback
真正难的不是让图动起来，而是让「动」这件事始终可控：索引不越界、定时器不堆积、坏图不拖垮布局、移动端滑动不触发页面滚动。这些细节没卡死，后面加过渡动画、无缝循环、键盘支持才不会反复返工。
