纯CSS自动轮播可用animation+@keyframes实现，关键在于绝对定位叠放元素、opacity/z-index或transform控制显隐与位移，配合radio输入框实现手动切换，避免JS依赖及兼容性问题。
用纯 CSS 实现自动轮播，不依赖 JS
能不用 JS 就别用——尤其当幻灯片只是静态内容轮换时。animation + @keyframes 完全够用，且无交互干扰、加载即生效。
关键点在于：所有 img 或 section 必须在同一容器内用 position: absolute 叠放，再通过 opacity 和 z-index 控制显隐顺序。
- 轮播周期由
animation-duration决定，比如12s表示整套动画跑完耗时 12 秒 - 每张图停留时间 =
animation-duration / 图片数量；4 张图就设25%关键帧节点 - 必须加
animation-iteration-count: infinite，否则只播一次 - 慎用
animation-timing-function: ease——它会让切换变“慢入慢出”，看起来像卡顿；推荐steps(1, end)或linear
@keyframes slide {
0% { opacity: 1; z-index: 2; }
25% { opacity: 1; z-index: 2; }
25.1% { opacity: 0; z-index: 1; }
50% { opacity: 0; z-index: 1; }
/* …后续类推 */
}点击切换时，input[type="radio"] 比 button 更稳
用原生单选框做控制锚点，比监听 click 事件更可靠：无需防抖、不抢焦点、天然互斥、支持键盘 Tab 导航。
结构上，每个 input 放在对应幻灯片区块前，用 id/for 关联 label，再靠 :checked ~ .slide 选择器驱动显隐。
立即学习“前端免费学习笔记（深入）”；
-
input必须是同名（name="slider"），否则无法互斥 -
label需设display: block或加cursor: pointer，否则点击区域不明确 - 避免把
input设为display: none后完全隐藏——部分屏幕阅读器会跳过；改用position: absolute; left: -9999px - 若需默认显示第 2 张，给第 2 个
input加checked属性即可
transform: translateX() 切换比 opacity 更适合移动端
纯透明度切换在 iOS Safari 上偶发渲染残留（白边、闪帧）；用 translateX() 做位移滑动，触发 GPU 加速，更顺、更省电。
原理是让所有幻灯片区块水平排列，容器 overflow: hidden，再用 transform: translateX(-N%) 移动视口。
- 每张图宽度设为
100%，父容器宽度为N * 100%（N 是图片数） - 用
:checked触发不同translateX值，例如第 3 张对应translateX(-200%) - 务必加
will-change: transform提前告知浏览器该元素将动画，减少重排开销 - 不要混用
opacity和translateX做“淡入+滑动”——动画节奏难对齐，易出现错层
遇到 Uncaught TypeError: Cannot read property 'style' of null 就检查 DOM 加载时机
这个错误几乎全是 JS 版幻灯片写的——脚本执行时，document.querySelector('.slides') 返回 null，因为 HTML 还没解析完。
- 把
<script></script>标签移到
