原生轮播图可用html+css+js实现，关键在结构稳固、切换平滑、定时器可控；需用div包裹独立img标签并设显式宽高，容器固定高度，定时器需清理，按钮用button并绑定data-index。
轮播图不是必须用框架才能跑起来，原生 HTML + 少量 CSS + 一小段 JS 就能稳定工作。关键不在“炫技”，而在结构不塌、切换不跳、定时器不打架。
轮播容器和图片结构怎么写才不踩坑
最稳妥的起点是用 <div class="carousel"> 包住一组独立 <code><img> 标签，每张图带 alt 和显式宽高（比如 width="600" style="max-width:90%"）。别把所有图片塞进一个 src 属性里——src 只认单个 URL，写多个会直接失效。
常见错误现象：图片堆叠、高度忽大忽小、点击后残留上一张。
- 所有
<img>默认加style="max-width:90%"，只给当前项设display: block - 避免用
visibility: hidden或opacity: 0控制显隐——前者占位影响父容器高度，后者仍响应事件且需额外过渡 - 轮播容器必须设死高度（如
height: 400px），否则display切换会触发重排，页面跳动 - 别一上来就套
<picture></picture>或<source></source>，响应式先放一边，先把单尺寸切稳
自动轮播的 setInterval 怎么不崩
setInterval 不是写一次就完事，没清理机制等于埋雷。用户点按钮、鼠标悬停、切到后台再切回来，都可能让多个定时器并发执行，结果就是图片乱跳、索引错位、内存泄漏。
实操建议：
- 定义全局变量
let carouselTimer = null，每次调用setInterval前先clearInterval(carouselTimer) -
mouseenter时清定时器，mouseleave时重置并重启（移动端可跳过） - 左右按钮点击后，立刻调用重置函数（例如
resetTimer()），而不是等下个周期 - 绝对不要用
setTimeout递归模拟轮播——堆栈风险高，且无法统一销毁
导航按钮和指示点怎么绑定才可靠
按钮语义和行为必须可控。用 <button type="button"></button>，别用 <a></a> 或 <div> 模拟，否则无 JS 时跳转、报错时失焦、禁用状态无效等问题全来。
<p>指示点推荐用 <code>data-index 绑定，比靠 DOM 顺序取索引更健壮：
- 每个点写成
<button type="button" data-index="0"></button>，点击时读e.target.dataset.index - 按钮点击后，除了切换图片，必须同步调用
resetTimer()，否则刚切到第 2 张，0.5 秒后又切走 - 当前激活的点加
aria-current="true"，提升可访问性；对应图片加aria-hidden="false"，其余为true
真正难的不是让图动起来，而是让动的过程在各种中断、重入、DOM 变更下依然保持索引准确、状态干净、视觉连贯。定时器清理、display 控制顺序、容器高度锁定，这三处漏掉任何一点，轮播就会在真实用户操作中露馅。
