用原生html+css+js实现轮播图的关键是结构简洁（div包img）、display切换显隐、容器定高防抖动、定时器统一管理防冲突、按钮语义化（button[type=button]）及加载兜底。
直接用 HTML + 少量 CSS + 原生 JS 就能做出可运行的轮播图，不需要任何库。关键不是“动起来”，而是“切得稳、停得准、不崩”。
用 <div> 包 <code><img> 搭结构，别套 <ul></ul> 或 <picture></picture>
最稳妥的起点是：<div class="carousel">
<img src="a.jpg"><img src="b.jpg"><img src="c.jpg">
</div>。每张图独立、带 alt、设固定宽高（如 width="600" height="400"）。别把多张图塞进一个 src，也别一上来就用 <picture></picture> 或懒加载——这些会干扰初始显隐逻辑。
常见错误现象：图片堆叠、高度塌陷、点击无反应。原因往往是结构嵌套过深或语义标签（如 <figure></figure>）干扰了 JS 选择器。
<div class="carousel"> 作为唯一外层容器，方便后续加样式和 <code>querySelector- 所有
<img>直接子元素，不包<li>、<div class="slide"> 等中间层（除非你明确需要 CSS Flex/Grid 布局） <li>初始全部加 <code>style="display: none;"，第一张额外加style="display: block;" - 切换前先遍历所有
<img>，统一设display = "none" - 再给目标索引那张设
display = "block" - 轮播容器必须设死高度（如
height: 400px），否则display切换会触发重排，页面抖动 - 定义
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer) -
mouseenter时设isPaused = true并clearInterval；mouseleave时重置并重启 - 左右箭头或指示器按钮点击后，同样要
clearInterval+ 重置索引 + 重启定时器 - 鼠标悬停或触摸开始（
touchstart）时暂停，避免移动端误触后仍自动切换 - 图片加载失败时，
<img>高度为 0，整个轮播会塌陷——务必给容器设固定高度，并在 CSS 中加min-height或 fallback 背景色
用 display: none 切换，别碰 visibility 或 opacity
这是零基础最易掌控、性能开销最小的方式。直接操作 element.style.display，比动画类切换快且稳定。
常见错误是用 visibility: hidden——它占位，可能撑开父容器导致跳动；或用 opacity: 0——透明但仍响应鼠标事件，且需额外加 transition 才有淡入淡出效果，反而增加复杂度。
自动轮播必须配 clearInterval 和暂停开关
只写 setInterval(switchImage, 3000) 是危险的：用户点按钮后定时器还在跑，鼠标悬停时还在切，极易造成多线程冲突和假死。
核心是用一个全局变量存定时器 ID，并在所有交互入口清理+重启：
导航按钮必须用 <button type="button"></button>，别用 <a></a> 或 <div>
<p><code><button type="button"></button> 是唯一既语义正确、又默认无跳转、还支持 disabled 属性的方案。用 <a href="#"></a> 会导致页面跳顶，用 <div> 则无法禁用、无障碍支持差。
<p>实操建议：</p>
<ul>
<li>每个按钮加 <code>data-index="0"、data-index="1" 等，JS 里直接取值切换
真正难的不是让图动起来，而是让所有切换时机对齐：手动点完第2张，自动逻辑不能立刻切到第3张；鼠标移开后，也不能卡顿半秒才恢复；图片 404 时，轮播区域也不能缩成一条线。这些细节全靠定时器管理、DOM 控制粒度和容器约束来兜底。
