结论：用纯 HTML 搭建图片轮播组件不可行——HTML 仅描述结构，无交互、定时、状态切换能力；所谓“纯 HTML 轮播”实为 CSS hack 或必须依赖 JavaScript。
直接说结论：用纯 HTML 搭建「图片轮播组件」不可行——HTML 本身没有交互能力、无定时控制、无法切换 DOM 状态，所谓“纯 HTML 轮播”本质是误称，实际必须依赖 JavaScript 或 CSS 动画 + :checked 等 hack 方式，但后者严重受限。
为什么不能只靠 HTML 实现轮播
HTML 是标记语言，只负责结构描述，不处理事件、不操作 DOM、不响应用户动作。轮播需要至少三类能力：自动切换、手动翻页、当前项高亮/动画过渡，这些在 HTML 标准中完全不存在对应标签或属性。
常见误解来源：有人把 <input type="radio"> + label + :checked + ~ 选择器组合称为“纯 HTML 轮播”，但它本质是 CSS 驱动的伪交互，存在硬伤：
- 无法自动播放（没
setInterval） - 无法循环（最后一张点“下一张”会失效）
- 无法键盘导航（Tab 键可聚焦但无逻辑响应）
- 无法暂停/播放控制
- 无障碍支持极差（屏幕阅读器无法识别轮播语义）
用 JavaScript 实现最小可行轮播（50 行内）
真正可控、可维护、可访问的轮播，应基于原生 JavaScript 操作 img 元素与索引状态。核心只需四步：
立即学习“前端免费学习笔记（深入）”；
- 用
document.querySelectorAll('.carousel img')获取所有图片 - 维护一个
currentIndex变量，初始为0 - 写一个
showSlide(index)函数：隐藏全部img，再显示第index张（可用classList.toggle控制active类） - 用
setInterval调用nextSlide()，内部做currentIndex = (currentIndex + 1) % slides.length
示例关键片段：
const slides = document.querySelectorAll('.carousel img');
let currentIndex = 0;
function showSlide(n) {
slides.forEach((s, i) => s.classList.toggle('active', i === n));
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
setInterval(nextSlide, 3000);
用 CSS + radio hack 做静态轮播（仅限演示/原型）
如果真要避开 JS（比如 CMS 内容页禁脚本），可勉强用 input[type="radio"] + label + :checked ~ 实现单次手动切换，但必须接受以下限制：
- 每张图对应一个
<input id="slide-1">，且name相同 -
label[for="slide-2"]必须放在对应input后面，才能用~选中后续元素 - 动画只能靠
opacity+transition，不能用transform移动（因无法动态改left值） - 无法获取当前状态，所以“指示器”只能靠 CSS
:checked + label模拟，点击后不会更新其他 label 样式
这种写法在 Safari 旧版本和部分邮件客户端里可能完全失效，生产环境请绕道。
轮播组件容易被忽略的细节
多数人写完切换就以为完工，但真实项目里这几个点常导致上线后被投诉：
- 没加
tabindex="-1"到轮播容器，导致键盘 Tab 会卡在每张图上（应只让button可聚焦） - 没监听
blur或mouseleave暂停自动播放——用户正在阅读文字时图片突然切走，体验极差 - 图片没设
alt，且没给aria-live="polite"区域同步当前图描述，对屏幕阅读器用户不友好 - 没处理图片加载失败：用
onerror或:not([src])CSS fallback，否则空白框突兀出现
轮播不是炫技组件，而是信息通道。动效可以简，语义和健壮性不能省。
