最轻量兼容的淡入淡出方案是CSS opacity+transition配合JS类名切换：基础类设opacity:0和transition，.show类设opacity:1；多图轮播需JS管理索引、绝对定位叠层、仅用opacity/z-index控制显隐，避免display/visibility导致无法过渡或布局抖动。
用 CSS opacity + transition 配合 JS 控制类名切换，是最轻量、兼容性好、且不依赖第三方库的实现方式。别直接上 animation 关键帧或 jQuery fadeIn/fadeOut —— 它们要么难控制切换时机，要么在快速翻页时容易卡顿或队列堆积。
怎么用 CSS 实现单张图淡入淡出（无 JS）
适合静态占位、加载状态提示等简单场景。核心是靠 opacity 和 transition 响应类名变化：
.img-fade {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.img-fade.show {
opacity: 1;
}
关键点：
-
transition必须写在基础类（.img-fade）上，否则加类瞬间生效、没过渡 - 初始
opacity: 0时元素仍占布局空间，如需完全隐藏可加visibility: hidden配合，但注意visibility不触发重排，opacity才真正影响合成层 - 别用
display: none切换 —— 它无法过渡，会直接闪现
JS 控制多张图片轮播淡入淡出（推荐方案）
真实轮播必须用 JS 管理当前索引、防止重复触发、处理用户手动切换。以下是最简健壮写法：
立即学习“前端免费学习笔记（深入）”；
let currentIndex = 0;
const images = document.querySelectorAll('.carousel-img');
const total = images.length;
function showImage(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
});
}
function nextImage() {
currentIndex = (currentIndex + 1) % total;
showImage(currentIndex);
}
// 初始化
showImage(0);
// 自动轮播（可选）
setInterval(nextImage, 3000);
CSS 配套：
.carousel-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.carousel-img.active {
opacity: 1;
z-index: 1;
}
注意事项：
- 所有图片用
position: absolute叠在一起，避免 DOM 重排抖动 - 只靠
opacity和z-index控制显隐，不用display或visibility切换 - 手动点击切换时，务必先清除定时器再重置
setInterval，否则多个定时器并发会导致跳图
为什么不用 fadeIn() / fadeOut()（jQuery）
这些方法底层仍是操作 opacity，但存在几个硬伤：
- 连续快速调用（比如用户狂点下一页）会把动画塞进队列，导致延迟播放甚至卡死
- 无法精确同步多图切换：比如淡出 A 的同时淡入 B，jQuery 默认是串行执行，得手动用
stop(true, true)清队列，易出错 - 移动端 touch 事件响应慢半拍，
fadeIn的回调时机不可靠，影响后续逻辑判断 - 现代项目基本不引入 jQuery，纯 CSS + 原生 JS 更可控、体积小
最易被忽略的是：淡入淡出动画本身不解决图片加载空白问题。如果 src 是网络地址，首次切换可能看到白屏再淡入 —— 得配合 img.onload 或 loading="lazy" + 占位符处理，这才是实际项目里真正卡住人的地方。
