纯html无法实现轮播图，必须配合css控制显隐/动画、javascript控制切换逻辑；结构需用div.carousel容器、独立img标签并设宽高和alt；css首选display:none/block并锁定容器高度；定时器需全局管理防重叠；导航按钮须用button并统一用dataset.index取索引。
纯 HTML 无法实现轮播图，必须配合 CSS 控制显隐/动画、JavaScript 控制切换逻辑——这是最常被忽略的前提。
HTML 结构怎么写才不踩坑
结构松散或语义错位，后续 JS 就很难精准选中目标元素。关键不是“能动”，而是“可控、可维护”。
-
div.carousel作为外层容器，别用section或article替代——它们带语义，但没选择器优势 - 每张图用独立
img标签，直接放在容器里，不要套ul/li或figure（除非你明确需要列表语义或图片 caption） - 所有
img必须带alt和固定宽高（如width="800" height="450"），否则容器高度会抖动 - 避免把多张图塞进单个
src属性——<img src="a.jpg,b.jpg">是无效写法，浏览器只解析第一个逗号前的部分
CSS 显隐控制用 display 还是 opacity？
初学者容易为“酷”而选错方案：opacity 动画看着顺滑，但默认仍响应鼠标事件、占布局流；display 最简最稳，但切换时有重排风险。
- 首选
display: none+display: block：快、无事件干扰、兼容性好 - 容器必须设死高度（如
height: 450px），否则display切换会触发重排，页面跳动 - 别用
visibility: hidden：它占位，可能撑开父容器，导致下方内容上移再回落 - 若坚持用
opacity，务必加pointer-events: none到非激活项，否则用户可能误点到隐藏图上
setInterval 自动轮播为什么总乱跳？
不是定时器不准，而是没管理好生命周期。多个 setInterval 实例同时运行，是轮播失控的根源。
- 全局存一个引用：
let carouselTimer = null，每次启动前先clearInterval(carouselTimer) -
mouseenter时清除，mouseleave时重启——但别一离开就立刻 start，加个 300ms 延迟防抖 - 手动点击左右按钮后，必须立即重置定时器，否则刚切到第 2 张，0.8 秒后又切到第 3 张
- 绝对不要用
setTimeout递归调用模拟轮播：堆栈易溢出，且无法统一清理
导航按钮和指示器怎么绑定才可靠
按钮点击没反应、点第 3 个 dot 却跳到第 2 张，通常是因为索引计算或事件委托失效。
- 按钮用
button[type="button"]，不是a或div——前者禁用安全、无默认跳转 - 指示器用
button[data-index="2"]，别用span：button 天然支持disabled和键盘焦点 - JS 中取索引统一用
parseInt(btn.dataset.index)，别依赖Array.from(...).indexOf()查 DOM 位置——DOM 顺序可能被 CSS 改变 - 切换时用取余运算处理循环：
nextIndex = (currentIndex + 1) % slideCount，比 if-else 更简洁不易漏
真正难的不是让图动起来，而是让动得稳、停得准、切得顺——所有细节都堆在定时器管理、DOM 状态同步和容器高度锁定这三处。漏掉任何一点，上线后都会变成“偶发性跳图”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
