轮播图怎么制作html渐变切换_做html轮播图渐变过渡法【渐变】_技术教程

最简渐变轮播用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);