纯HTML无法实现可交互轮播图——它无定时、无事件、无状态控制，必须配合CSS处理显隐与过渡、JavaScript驱动DOM切换，三者协同缺一不可。
直接用纯 HTML 搭不出可交互的轮播图——HTML 本身没有切换逻辑、没有定时器、没有事件响应能力。必须配合 CSS 控制显示/隐藏和过渡，再靠 JavaScript 驱动状态变化，三者缺一不可。
为什么不能只写 HTML 就实现轮播
常见误区是以为只要把多张 <img> 堆进一个 <div>，加个 class="carousel" 就能自动轮播。实际浏览器只会把它们全渲染出来叠在一起或排成一行，没有任何切换行为。
-
<img>标签只是内容载体，不带播放控制语义 - HTML5 没有原生
<carousel>或<slideshow>元素（截至 2026 年） - 所有“自动播放”“点击切换”“指示点同步”都依赖 JS 运行时操作 DOM 类名或样式
HTML 结构必须满足的三个前提
结构不是越复杂越好，而是要为后续 CSS 和 JS 留出明确的钩子。关键在于：可定位、可遍历、可标记当前项。
- 外层容器用
<div class="carousel">，不要用<section>或<article>——语义正确但类名缺失会导致 JS 找不到根节点 - 图片项统一包裹在
<div class="carousel-images">内，每张图用<img>直接子元素（不用<li>或<figure>套娃，除非你明确需要列表语义+JS 适配） - 第一张图必须带
class="active"，否则 JS 初始化时不知道从哪开始；其他图不能带该类，也不能用style="display:none"写死——这会干扰 CSS 过渡
正确示例：
立即学习“前端免费学习笔记（深入）”；
<div class="carousel">
<div class="carousel-images">
<img src="1.jpg" alt="1" class="active">
<img src="2.jpg" alt="2">
<img src="3.jpg" alt="3">
</div>
<button class="prev"></button>
<button class="next"></button>
</div>
HTML 中容易被忽略的可访问性细节
轮播图不是“视觉组件”而是“交互式导航控件”，屏幕阅读器用户需要感知当前页、总页数、操作方式。仅靠 alt 不够。
- 左右按钮必须加
aria-label，例如<button class="prev" aria-label="上一张"> - 如果用了指示点（dots），每个
<button>要有aria-current="true"标记当前项，并动态更新 - 整个
<div class="carousel">建议加role="region"和aria-roledescription="carousel"，避免被读成普通分区 - 不要用
<img>的title属性替代alt——它不被所有读屏器识别，且会触发悬停提示干扰键盘导航
CSS 和 JS 的最小职责边界必须划清
HTML 只负责“有哪些东西、谁是当前”，其余全部交给另外两层。混淆职责会导致动画卡顿、状态不同步、响应式失效。
- CSS 负责：所有图片绝对定位重叠、
.active的opacity: 1和过渡、非.active的opacity: 0、容器overflow: hidden - JS 负责：定时器启动/暂停、
click事件监听、classList.add/remove("active")切换、索引计数、边界处理（如到最后一张点“下一张”跳回第一张） - 禁止在 HTML 里写内联样式（如
style="opacity:0"）或内联脚本——它会覆盖外部 CSS 过渡，且无法被 JS 动态管理
最常踩的坑是：用 display: none/block 切换图片。这会让浏览器强制重排，过渡动画完全失效，且 display 本身不可动画。必须用 opacity + transition 组合。
