纯css轮播图在生产环境几乎不可用，因其无法支持键盘导航、焦点管理、悬停暂停、自动播放同步及过渡中断等基本交互需求；:checked+~方案存在渲染延迟、闪帧、语义脱节等硬伤，真实项目必须由js统一控制currentslide状态并驱动dom更新。
纯 CSS 轮播图能跑通，但只适用于静态、无交互、不需自动播放的极简场景；真实项目中必须用 JavaScript 控制切换逻辑，否则无法响应点击、悬停暂停、键盘导航、焦点管理等基本需求。
为什么:checked + ~ 伪类方案在生产环境几乎不可用
该方案依赖 <input type="radio"> 的选中状态驱动兄弟元素显隐，看似“零 JS”，实则存在硬伤：
- 无法通过键盘（Tab/Space）自然聚焦并切换，
tabindex对input[type="radio"]无效，除非手动加tabindex="0"并监听keydown，那就又绕回 JS - 指示点（dots）点击后，浏览器会触发 radio 的默认行为，但无法同步更新当前索引变量，导致 JS 逻辑（如自动播放计时器）完全脱节
- Firefox 121+ 中，当轮播项超过 5 个时，
:checked ~ .slide的层叠计算可能出现渲染延迟，视觉上出现“闪帧” - 无法做过渡中断：用户快速连点两次“下一张”，CSS 动画不会取消前一个，容易卡在半途状态
原生 JS 轮播的核心控制点只有三个
不必封装类库，手写 80 行内可覆盖 95% 场景。关键不是“怎么动”，而是“什么时候动、动完之后做什么”：
-
currentSlide必须是单一可信源：所有操作（按钮点击、dot 点击、自动播放、键盘事件）都只修改它，再由它统一驱动 DOM 更新 - 切换函数必须防抖：连续调用
goTo(2)和goTo(3)时，要清除前一个setTimeout或requestAnimationFrame，否则动画队列错乱 - 自动播放要用
setInterval+clearInterval配合悬停状态：监听mouseenter/mouseleave，但注意移动端没有 hover，需 fallback 到touchstart暂停
DOM 结构与 CSS 定位的常见误配
很多轮播失效，根本原因不在 JS，而在 HTML/CSS 层级错位：
- 外层容器漏设
overflow: hidden→ 图片全部横向铺开，看不到“轮播”效果 - 图片容器用了
display: flex，但子项没加flex-shrink: 0→ 图片被压缩变形，尤其在 Safari 中更明显 - 用
opacity: 0 / 1切换时，未加transition: opacity 0.3s ease→ 动画不生效，看起来像硬切 - 用
transform: translateX()时，父容器忘了设will-change: transform→ Chrome 120+ 下偶发闪烁，尤其在高 DPI 屏幕
最易被忽略的是焦点管理：轮播容器应有 tabindex="0"，每次切换后主动 .focus()，否则屏幕阅读器用户无法感知当前在哪张图。这不是“增强体验”，而是 WCAG 2.1 AA 级合规底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
