纯css实现轮播图核心是利用@keyframes控制opacity或transform实现淡入淡出或滑动切换，所有图片需绝对定位叠放于同一容器中；但自动循环与手动暂停功能受限，实际项目通常需javascript配合控制定时器、状态切换及交互响应。
淡入轮播图的核心是 CSS 动画 + JavaScript 控制切换
纯 CSS 实现轮播容易卡在“自动循环”和“手动暂停”上，所以实际项目里基本都要加 JS 控制。关键不是写多少代码，而是让 opacity 变化和 transition 匹配，同时避免元素重排或闪动。
常见错误是直接对 display: none 元素做 opacity 动画——它不会动，因为 display 为 none 时元素已脱离渲染流；另一个坑是没设 position: absolute，导致图片堆叠错位或高度塌陷。
- 所有轮播项必须包裹在同一容器内，且设
position: relative - 每个轮播项用
position: absolute叠在一起，初始opacity: 0，当前项设opacity: 1 - 过渡效果只加在
opacity上，不要加all，否则可能触发重绘开销 - 动画时间建议设
0.4s，太短不明显，太长显拖沓
HTML 结构要极简，避免多余 wrapper
很多人套三四层 div，结果 JS 找元素困难、CSS 选择器冗长。轮播图真正需要的只有三样：容器、图片列表、控制按钮（可选）。
下面是最小可行结构：
<div class="carousel"> @@##@@ @@##@@ @@##@@ </div>
注意：active 类只标记当前显示项，不用 data-index 或其他属性也能工作；carousel-item 必须带 position: absolute 和尺寸（比如 width: 100%; height: 100%），否则可能不显示。
JavaScript 切换逻辑要防重复触发
自动轮播用 setInterval 很简单，但用户点按钮或鼠标悬停时，必须清除旧定时器再新建，否则会越跑越快。另外，切换前得先移除所有 active，再给目标项加回去——顺序错了就会出现“两图同时淡入”或“全黑一帧”。
- 用一个变量
let currentIndex = 0记录状态，比反复查 DOM 更可靠 - 切换函数开头加
if (items.length === 0) return，防止 DOM 没加载完就执行 - 手动切换按钮（如“上一张”“下一张”）要调用同一套切换函数，别另写逻辑
- 鼠标进入轮播区时调用
clearInterval(timer)，离开时重新startAutoPlay()
移动端点击区域小、动画卡顿怎么办
手机上默认点击区域只有图片本身，用户经常点不到；另外低端安卓机上 opacity 动画可能掉帧，尤其图片多或体积大时。
两个实操解法：
- 给
.carousel加cursor: pointer和padding: 1px（哪怕 1px），能扩大点击热区，避免误操作 - 加
will-change: opacity到.carousel-item，告诉浏览器这个属性会变，提前升层优化渲染 - 图片务必压缩，单张超过 200KB 就明显卡；可用
<picture></picture>配合srcset做响应式加载 - 不要在轮播里嵌视频或 iframe，它们会阻塞 opacity 动画，优先用 poster 图 + 点击后载入
最常被忽略的是：没给容器设明确宽高。如果父容器是 flex 或 grid，而 .carousel 没设 height，图片会塌成一条线——这种问题只能靠浏览器调试器看 computed height 才能快速定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
