纯css图片轮播需用多层div背景图+opacity动画切换，禁用img src切换；须设固定宽高、硬件加速、响应prefers-reduced-motion，预加载和raf提升js轮播体验。
用 CSS @keyframes 做最轻量的图片轮播
纯 CSS 实现自动切换，不依赖 JS，适合静态页或首屏快速展示。关键不是“动起来”，而是“不动声色地换图”。
常见错误是直接给 <img alt="html如何实现图片自动一张一张的" > 加动画——它只会缩放/位移，不会换图源。必须用背景图 + background-image 切换。
- 把所有图片设为同一个容器的背景图，用
background-image: url(...), url(...), url(...)不起作用，CSS 不支持多背景图按帧切换 - 正确做法：用多个
<div> 层叠，每层一个背景图，通过 <code>opacity和z-index控制显隐 - 动画时长和延迟要错开：3 张图就设 3 段
0%, 33.3%, 66.6%, 100%的 opacity 变化 - 注意
animation-iteration-count: infinite必须加，否则只播一次
```css
.slider {
position: relative;
width: 400px;
height: 250px;
}
.slider > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0;
animation: fade 9s infinite;
}
.slider > div:nth-child(1) { background-image: url(img1.jpg); animation-delay: 0s; }
.slider > div:nth-child(2) { background-image: url(img2.jpg); animation-delay: 3s; }
.slider > div:nth-child(3) { background-image: url(img3.jpg); animation-delay: 6s; }
<p>@keyframes fade {
0%, 100% { opacity: 0; }
15% { opacity: 1; }
30% { opacity: 0; }
}</p><pre class='brush:language-;toolbar:false;'>
JS 控制轮播节奏更灵活，但别用 setInterval 直接切 src
想手动暂停、跳转、响应用户交互？JS 是绕不开的。但直接改 <img src=""> 会闪白、没过渡、并发加载失败。
- 浏览器对同一
<img>元素反复改src会中断前一个请求，新图未加载完时src已变，导致空白 - 正确做法：预加载下一张图（用
new Image().src = url），等onload触发后再替换 DOM 中的src - 用
requestAnimationFrame替代setInterval更顺滑，尤其在页面非激活状态时避免后台疯狂计时 - 切图时加个淡入淡出类，用
transition: opacity 0.3s，别靠 JS 操控 opacity 数值
轮播卡顿或跳帧？先查 will-change 和图片尺寸
滚动不流畅、图片突然跳一下，90% 和渲染层有关，不是代码逻辑问题。
立即学习“前端免费学习笔记（深入）”；
-
<img>或背景图没设宽高，会导致重排（reflow），动画一卡一卡 - CSS 动画元素没启用硬件加速：
transform: translateZ(0)或will-change: opacity能推到 GPU 层，但别滥用，每个都加反而拖慢 - 图片太大（比如 4000×3000 像素）但容器只显示 400×250，浏览器仍要解码全图——务必用
srcset或服务端裁剪提供合适尺寸 - 移动端 Safari 对
@keyframes中background-image切换支持不稳定，建议降级为 opacity 切换<img>标签
自动轮播该不该默认开启？prefers-reduced-motion 得检查
不是所有用户都需要动效。系统级“减少动画”开关开了，你的轮播还在狂转，体验直接负分。
- CSS 层面加一句
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }，强制动画几乎不执行 - JS 层面用
window.matchMedia("(prefers-reduced-motion: reduce)").matches判断，初始化时就停掉定时器 - 别只在首页加这个判断——只要页面存在自动轮播，就得全局响应，否则用户点进内页还是被晃
轮播看着简单，真正稳的实现，核心不在“怎么动”，而在“什么时候不动”“动之前图有没有准备好”“动了别人受不受影响”。细节堆起来，就是加载白屏、卡顿、无障碍失效这些事。
