最稳妥的轮播结构是用<div class="carousel">包裹多个独立<img>标签，每张图设alt和固定宽高，初始全display:none，仅当前图display:block；自动轮播需clearInterval再setInterval并配暂停逻辑；导航按钮用<button type="button">并动态禁用。
轮播结构用 <div> 套 <img> 最稳妥
别一上来就套现成轮播库，纯 HTML + 少量 CSS 就能搭出可运行的骨架。核心是用一个容器包裹所有图片，每张 <img> 作为独立子元素，不嵌套在 <a> 或 <figure> 里（除非你明确需要链接或语义化）。这样后续用 JS 控制显隐、CSS 控制过渡都更直接。
常见错误是把所有图片塞进单个 <img src="a.jpg,b.jpg,c.jpg"> —— 这根本无效，src 只接受单个 URL。
- 容器用
<div class="carousel">，方便后续加样式和 JS 选择器 - 每张图用独立
<img>，带alt和明确宽高（如width="600" height="400"），避免布局抖动 - 不要用
<picture>或<source>开始就搞响应式，先确保单尺寸能切
display: none 切换图片最简单，但注意重排问题
JS 控制显示时，直接操作 style.display 是最快路径。默认所有 <img> 设 display: none，只给当前项设 display: block。别用 visibility: hidden —— 它占位，可能影响父容器高度计算；也别用 opacity: 0 —— 透明但仍响应事件，且动画需额外加 transition。
- 初始状态统一设
display: none，第一张图手动加display: block - 切换时先设全部为
none，再设目标索引为block，顺序不能反 - 如果轮播容器高度不固定，
display切换会触发重排，可能造成页面跳动；此时需给容器设死高度（如height: 400px）
自动轮播用 setInterval，但必须加暂停/恢复逻辑
只写 setInterval(switchImage, 3000) 很危险：用户鼠标悬停时还在切，点按钮切图后定时器没清，导致多线程冲突。实际必须配套暂停机制。
立即学习“前端免费学习笔记（深入）”；
- 定义全局变量
let carouselTimer = null，每次启动前先clearInterval(carouselTimer) -
mouseenter时clearInterval，mouseleave时重新setInterval - 手动点击导航按钮后，同样要重置定时器（否则刚切完第2张，0.5秒后又切到第3张）
- 别用
setTimeout递归模拟 —— 容易堆栈溢出，且不好统一清理
左右箭头按钮用 <button>，禁用 <a href="#">
<a href="#"> 点击会触发页面跳顶或刷新，尤其在无 JS 或 JS 报错时行为不可控。按钮语义清晰、默认无跳转、支持 disabled 属性。
- 左箭头写
<button type="button" id="prev-btn"></button>，右箭头同理 - 初始禁用逻辑：第一张时
prev-btn.disabled = true，最后一张时next-btn.disabled = true - 按钮内用 Unicode 符号即可，如
<button>‹</button>和<button>›</button>，比引入图标字体轻量 - 别给按钮加
onclick行内属性 —— 用addEventListener统一管理更利于调试
轮播真正难的不是切图，而是边界处理：索引越界、快速连点、窗口失焦再聚焦、图片加载失败时的 fallback。这些细节不补上，框架看着能跑，一上线就露馅。
