纯HTML无法实现可用轮播图，因缺乏定时器、事件监听和DOM状态管理能力；CSS动画无法响应交互、跳转或无缝循环；需JS控制自动播放、暂停、错误兜底及class精准切换。
纯 HTML 无法实现可用的轮播图——结构可以写，但自动切换、用户暂停、循环跳转、错误兜底这些核心能力，必须靠 JavaScript 驱动。
为什么不能只用 HTML + CSS 实现真正轮播
CSS @keyframes 能做无限循环动画，但一碰就断：没法响应 mouseenter 暂停，不能点击跳转到第 3 张，也无法在最后一张后自动切回第一张（即“无缝循环”逻辑缺失）。HTML 本身没有定时器、无事件监听、无 DOM 状态管理能力。所谓“纯 CSS 轮播”，实际只是视觉上动了，交互和边界控制全失效，上线即翻车。
setInterval 启动自动播放但必须配状态机
直接写 setInterval(nextSlide, 3000) 是危险操作。真实场景里，定时器必须和用户行为联动：
- 用布尔变量
isPaused控制是否执行切换，而不是反复clearInterval/setInterval -
mouseenter和touchstart时设isPaused = true；mouseleave和touchend时设isPaused = false - 左右按钮点击也要触发
isPaused = true，否则手动切完立刻被自动逻辑覆盖 - 在
nextSlide函数开头加if (isPaused) return，比销毁/重建定时器更稳
图片加载失败会导致容器塌陷，必须在 HTML 层防御
一张 img 加载失败（404 或跨域），其 offsetHeight 变成 0，整个 .carousel 容器高度归零——这不是 JS 错，是 HTML 结构没兜底：
立即学习“前端免费学习笔记（深入）”；
- 每张
<img>必须带width和height属性（如width="800" height="450"），强制保留占位 - 加上
onerror="this.style.display='none'"，避免空白块撑乱布局 - 禁用
background-image方式轮播：它不触发onerror，也拿不到自然尺寸，调试黑洞
DOM 切换比位移更轻量，但 class 管理必须严格
比起用 transform: translateX() 移动整个 .carousel-track，用 class="active" 控制单张显隐更省资源，尤其在低端 Android 上：
- 外层
<div class="carousel">设固定宽高 +overflow: hidden - 所有图片统一包裹在
<div class="slides">内，每张加class="slide" - 仅当前项有
class="slide active"，CSS 里只让.slide.active显示（如opacity: 1; z-index: 2） - 初始渲染时确保只有 1 张含
active，否则可能全黑或多图叠加
轮播图真正的复杂点不在“怎么动”，而在“动得稳、停得准、塌不了”——定时器泄漏、touch 事件漏监听、图片 404 不报错、active class 多加或漏加，这些细节往往压根不报错，却在线上静默崩溃。
