纯CSS可实现基础轮播，但自动切换、暂停、按钮响应必须配对使用setInterval与clearInterval；漏清定时器会导致切换错乱或堆叠执行，且容器高度须固定以避免重排跳动。
轮播图不是非得用 JS 才能动起来，很多场景下纯 CSS 就够了；但一旦加自动切换、暂停、按钮响应，setInterval 和 clearInterval 的配对使用就绕不开——漏清定时器，切图就会错乱或堆叠执行。
用 display: none 切图最简单，但容器高度必须固定
直接操作 style.display 是最快路径：所有 <img> 默认设 display: none，只给当前项设 display: block。别用 visibility: hidden（占位）或 opacity: 0（仍响应事件、需额外 transition）。
- 容器高度不固定时，
display切换会触发重排，页面可能跳动；务必给.carousel设死高度，如height: 400px - 初始状态统一设
display: none，第一张图手动加display: block - 切换逻辑必须是「先全设
none，再设目标索引为block」，顺序反了会导致闪白或空白 -
<img>必须带alt和显式宽高（如width="600" height="400"），否则布局抖动
多列轮播优先用 CSS Grid，别碰 float 或 inline-block
横向滚动 + 分页吸附，display: grid 是目前最可控的方式，无需 JS 就能完成基础逻辑。关键在于结构扁平和 CSS 属性组合。
- HTML 结构必须扁平：
<div class="carousel"><div class="card"><img></div><div class="card"><img></div></div>，子元素直系为卡片，不嵌套 wrapper - 必需的 CSS 缺一不可：
overflow-x: auto（不是scroll，iOS 不触发 snap）、scroll-snap-type: x mandatory、grid-auto-flow: column、grid-template-columns: repeat(3, 1fr) - 每个卡片加
scroll-snap-align: start，否则吸附失效 - 避免用
float或inline-block：响应式错位、间隙难控、无法精准对齐视口
setInterval 启动前必须先 clearInterval，且要覆盖所有触发点
只写 setInterval(switchImage, 3000) 很危险：鼠标悬停还在切，点按钮后定时器没清，导致多线程冲突。必须全局维护一个定时器引用，并在所有可能重启的地方清理。
立即学习“前端免费学习笔记（深入）”；
- 定义全局变量：
let carouselTimer = null -
mouseenter时执行clearInterval(carouselTimer)，mouseleave时重新setInterval - 手动点击左右按钮或指示点后，同样要
clearInterval(carouselTimer)并重置 - 别用
setTimeout递归模拟轮播——容易堆栈溢出，且不好统一清理
导航按钮必须用 <button type="button">，禁用逻辑要同步更新
<button> 语义清晰、默认无跳转、支持 disabled 属性；用 <a> 或 <div> 模拟按钮，JS 报错或禁用时行为不可控。
- 左右箭头按钮加
type="button"，防止表单提交或页面跳顶 - 当前为第一张图时，
prev按钮应disabled；最后一张时，next按钮disabled - 切换后立即更新按钮
disabled状态，不能只靠 JS 逻辑判断而不改 DOM 属性 - 指示点（dots）用
<button type="button">而非<span>，确保可聚焦、可键盘操作、屏幕阅读器可读
最容易被忽略的是定时器清理时机和容器高度锁定——前者导致多轮切换堆积，后者引发布局抖动；这两个点不处理，轮播图在真实用户交互中大概率出问题。
