轮播图淡入淡出应仅用 opacity + transition 实现，所有项需绝对定位重叠，统一设置 transition: opacity 0.4s，active 项 opacity: 1，其余为 0；禁用 display/visibility 过渡，避免定时器叠加，监听 visibilitychange 保障后台恢复后自动重启。
轮播图淡入淡出用 opacity + transition 最直接
不用 JS 也能做基础淡入淡出，核心是控制同一位置多个 <img alt="轮播图怎么制作html淡入淡出_实现html轮播图淡转法【特效】" > 或 <div> 的 <code>opacity 和 z-index。关键不是“切换”，而是“叠层+渐变可见性”。
常见错误：只改 display: none/block —— 这没法触发过渡动画；或忘记加 transition: opacity 0.5s ease，导致瞬间切换。
- 所有轮播项必须定位重叠（
position: absolute或position: relative+top/left: 0） - 只对
opacity做过渡，不要对display、visibility做 transition - 显隐需配合
z-index确保新图在上层，否则可能透出下一张
setInterval + classList.toggle() 控制切换逻辑
纯 CSS 方案难处理自动播放和用户交互同步，JS 控制更稳。重点不是写轮播，而是避免状态错乱：比如用户点下一页时，上一个定时器还没结束，导致跳两张。
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const total = items.length;
function showItem(index) {
items.forEach((item, i) => {
item.classList.toggle('active', i === index);
});
}
function next() {
currentIndex = (currentIndex + 1) % total;
showItem(currentIndex);
}
// 清除旧定时器再设新，防叠加
let timer = setInterval(next, 3000);
document.querySelector('.next-btn').addEventListener('click', () => {
clearInterval(timer);
next();
timer = setInterval(next, 3000);
});
注意：.carousel-item.active 对应 opacity: 1，其余为 opacity: 0，且都带 transition: opacity 0.4s。
立即学习“前端免费学习笔记（深入）”；
CSS 中 opacity 和 visibility 混用会出问题
有人想用 visibility: hidden 配合 opacity 优化性能，但这是陷阱：visibility 不触发 transition，且设为 hidden 后，即使 opacity 是 1，元素也不显示，动画直接失效。
- 只用
opacity控制显隐，值为0或1（别用0.01这类非整数，易引发渲染抖动） - 若要隐藏不可见项的交互，加
pointer-events: none到opacity: 0的样式里 - 不要给
opacity加!important，否则 JSstyle.opacity直接失效
移动端点击区域小、自动播放被禁，得手动补兼容
iOS Safari 和 Chrome for Android 默认禁止自动播放含音频的视频，但即使只是图片轮播，部分浏览器也会暂停 setInterval 当页面切到后台。淡入淡出本身没问题，但“自动切换”容易断。
- 监听
visibilitychange事件，在页面重新可见时重置定时器 - 左右箭头按钮至少保证
44px × 44px，符合移动触控最小尺寸 - 加
touch-action: pan-y到轮播容器，防止横向滑动时触发页面滚动
淡入淡出效果本身很轻量，真正卡住的往往是 DOM 重排（比如每次切换都改 height）或没清理定时器。把 opacity 和定时器这两件事盯死，基本就稳了。
