求助：实现每4秒轮播一个slide div并平滑过渡

首先，display: none无法实现平滑过渡效果，因为这个属性的变化不支持CSS过渡动画。我们需要调整样式逻辑，让所有slide重叠在一起，通过opacity和visibility控制显示隐藏，同时添加过渡动画实现平滑切换。

修改后的CSS #

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  position: relative; /* 让子元素绝对定位以重叠 */
  height: 100vh;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  opacity: 0; /* 默认隐藏 */
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease; /* 添加过渡动画 */
}

/* 标记当前显示的slide */
.slide.active {
  opacity: 1;
  visibility: visible;
}

img {
  outline: solid 5px #fff;
  object-fit: cover; /* 确保图片适配容器 */
}

.single img {
  width: 100%;
  height: 100%;
}

.split img {
  width: 50%;
  height: 100%;
}

.quad img {
  width: 50%;
  height: 50%;
}

修改后的HTML #

移除内联的display: none，改用active类标记初始显示的slide：

<div class="wrapper">
  <div class="slide single active">
    <img src="https://dummyimage.com/3840x2160/000/fff">
  </div>

  <div class="slide split">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
  </div>

  <div class="slide quad">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
  </div>
</div>

JavaScript自动切换逻辑 #

用setInterval定时切换slide，实现循环轮播：

const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
const intervalTime = 4000; // 4秒切换一次

function switchSlide() {
  // 隐藏当前slide
  slides[currentIndex].classList.remove('active');
  // 更新索引，循环回到开头
  currentIndex = (currentIndex + 1) % slides.length;
  // 显示下一个slide
  slides[currentIndex].classList.add('active');
}

// 启动定时切换
setInterval(switchSlide, intervalTime);

核心逻辑说明 #

1. CSS通过绝对定位让所有slide重叠，用opacity+visibility配合过渡动画，解决display无法平滑过渡的问题。
2. HTML用active类替代内联样式，更符合语义化和可维护性。
3. JavaScript通过索引跟踪当前slide，定时切换并循环，实现无限轮播效果。

内容的提问来源于stack exchange，提问作者Blake Rivell