最简渐变轮播用CSS opacity+transition实现：两张图绝对定位叠放，仅通过.active控制opacity淡入淡出；JS仅切换class，解耦样式与逻辑；禁用background-image因不支持独立opacity过渡。
用 CSS opacity + transition 实现最简渐变切换
纯 HTML/CSS 能做的渐变轮播，核心就是让两张图在相同位置叠放，通过控制 opacity 交叉淡入淡出。不需要 JS 也能跑，但需配合 @keyframes 或定时器类逻辑（实际项目中仍建议加轻量 JS 控制）。
关键点：容器设 position: relative，子图设 position: absolute; top: 0; left: 0;，再统一加 transition: opacity 0.6s ease-in-out;。
.carousel {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
注意：ease-in-out 比 linear 更自然；0.6s 是经验值，太快易闪，太慢显拖沓。
setInterval 切换 + classList 控制 active 状态
JS 部分只做状态切换，不操作样式，和上面 CSS 完全解耦。这是最不容易出错的协作方式。
立即学习“前端免费学习笔记（深入）”；
- 所有
img默认opacity: 0，仅.active有opacity: 1 - 每次只给一张图加
.active，上一张必须先移除 - 索引用模运算
% images.length避免越界 - 首次加载时手动触发一次
showSlide(0)，否则第一张不显示
const images = document.querySelectorAll('.carousel img');
let currentIndex = 0;
function showSlide(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
});
}
function nextSlide() {
currentIndex = (currentIndex + 1) % images.length;
showSlide(currentIndex);
}
setInterval(nextSlide, 4000);
为什么不用 background-image 做渐变轮播？
很多人想用 CSS background-image 配合 animation 切背景图，但这条路走不通：
- CSS 无法对
background-image单独设置opacity，整个元素透明会连带文字/按钮一起变淡 -
background-image不支持transition，只能靠@keyframes硬切，无法实现两张图同时存在、交叉淡入淡出的效果 - 响应式下
background-size和object-fit行为不一致，图片裁剪逻辑难对齐
结论：轮播图内容区必须是 img 标签（或 picture），才能独立控制每张图的显隐与过渡。
移动端触摸滑动要加 touchstart/touchend 吗？
如果只要求「自动渐变 + 手动点击切换」，那完全不需要 touch 事件——用按钮控制 currentIndex 就行。但一旦要支持手指左右滑，就必须捕获位移距离，且要注意：
- 不能只依赖
touchmove的clientX，得记录起始点touchstart的pageX - 滑动阈值建议设为
50px，太小易误触，太大不灵敏 - 滑动中要临时禁用自动播放（
clearInterval），松手后再恢复，否则行为冲突 - 渐变动画期间禁止触发新切换，否则
opacity过渡会打架，出现白屏或卡顿
渐变本身很简单，难的是边界控制和交互状态同步。多数人翻车，不是不会写 opacity，而是没处理好「正在过渡中又点下一张」这种竞态。
