纯CSS轮播图应基于:checked伪类控制显隐，禁用animation自动播放；用transform:translateX()替代left/margin-left实现平滑切换；隐藏项用visibility:hidden+opacity:0保障无障碍；移动端滑动必须JS实现。
轮播图用 :checked + input[type="radio"] 控制切换，别碰 animation 循环自动播
纯 CSS 轮播图本质是「单选控制显隐」，不是靠时间轴驱动。用 animation 模拟自动轮播看似省事，但一旦用户手动点击，动画时序就错乱，animation-play-state 难以精准干预，且无法响应 :checked 状态变化。真实项目里，自动播必须由 JS 控制节奏，CSS 只管“当前哪张显示”，否则交互一碰就崩。
实操建议：
- HTML 中每个
input[type="radio"]对应一张图，name相同保证单选 - 用相邻兄弟选择器（
input:checked ~ .slides > .slide:nth-of-type(N)）控制显隐，避免依赖 JS 操作 class - 默认第一项加
checked，确保初始状态明确 - 把自动轮播逻辑完全交给 JS 的
setInterval+click()触发 radio，CSS 不参与计时
transform: translateX() 比 left 或 margin-left 更稳，尤其在移动端
用 left 或 margin-left 移动轮播容器会触发重排（reflow），滚动卡顿明显；而 transform: translateX() 交由 GPU 合成，不打断渲染流水线。iOS Safari 对非 transform 位移的优化极差，滑动生涩几乎是必然。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 轮播切换瞬间“闪一下”或“跳一帧” → 大概率用了
left且没设will-change: transform - 快速连点后位置偏移 →
margin-left累加计算误差未清零
实操建议：
- 轮播容器设
display: flex，子项flex: 0 0 100%，宽度严格占满 - 用
transform: translateX(-N%)切换，N = 当前索引 × 100 - 加
transition: transform 0.3s ease-in-out，别用cubic-bezier过度调参，ease-in-out足够自然 - 必要时补
will-change: transform，但仅对活动容器加，别全局滥用
用 visibility: hidden + z-index 替代 display: none 防止焦点/读屏器中断
display: none 会让元素彻底退出渲染树和可访问性树，屏幕阅读器跳过、键盘 Tab 顺序断裂、focus() 失效——这对轮播图的无障碍支持是硬伤。而 visibility: hidden 保留布局占位和语义结构，配合 z-index 和 opacity: 0，视觉上等效隐藏，但可访问性完好。
使用场景：
- 需要支持键盘操作（Tab 切换 radio、Enter 触发切换）
- 产品要过 WCAG 2.1 AA 级无障碍审核
- 轮播图内有链接或按钮，不能因隐藏丢失语义
实操建议：
- 隐藏项设
visibility: hidden; opacity: 0; z-index: -1; - 显示项设
visibility: visible; opacity: 1; z-index: 1; - 确保所有
input[type="radio"]都有配套label，且for指向正确 ID - 不要用
aria-hidden="true"掩盖display: none的缺陷，这是本末倒置
移动端 touch 滑动必须用 JS，CSS scroll-snap 不可靠
scroll-snap-type: x mandatory 在部分 Android Chrome 和旧版 iOS 上表现飘忽：滑动惯性不足、snap 点偏移、快速滑动直接跳过 snap。它适合内容型横向滚动（如相册预览），但轮播图要求精确到“每张图停准一次”，必须用 touchstart/touchmove/touchend 计算位移，再触发对应 radio 的 click()。
性能影响：
- 监听
touchmove时不加{ passive: false }，iOS Safari 会忽略 preventDefault，导致页面误跟手滑动 - 不做节流（throttle），快速滑动可能触发多次判断，造成 radio 频繁切换
实操建议：
- 只在容器上监听
touchstart记录起始 X，touchend计算位移差，> 50px 才算有效滑动 - 滑动中禁用默认行为：
event.preventDefault()，并确保{ passive: false } - 用
Math.abs(deltaX) > containerWidth * 0.25判断是否切图，比固定像素值更适配不同屏幕 - 切图后立刻
element.scrollIntoView({ inline: 'start', behavior: 'auto' })辅助视觉对齐（仅作 fallback）
真正难的不是写出来，是让所有设备上的手指滑动、键盘 Tab、屏幕朗读、自动轮播这四件事互不干扰。多数人卡在“看起来能动”，其实只要换台安卓机点两下，或者开一次 VoiceOver，问题全暴露。
