带随机起始点的图片轮播需实现平滑交叉淡入过渡

你的核心问题是单图片切换导致过渡时露出背景，以下是修改后的实现，用双图片层叠+CSS过渡实现平滑交叉淡入，同时保留随机起始功能：

修改后的HTML #

<div class="homehero">
  <!-- 当前显示的图片 -->
  <img class="hero-img" id="currentImg" alt="" />
  <!-- 待切换的图片（初始透明） -->
  <img class="hero-img" id="nextImg" alt="" />
</div>

修改后的CSS #

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.homehero {
  height: 100%;
  /* 让子元素绝对定位时以该容器为基准 */
  position: relative;
}

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* 用CSS过渡实现平滑透明度变化，时长可调整 */
  transition: opacity 0.8s ease-in-out;
}

/* 初始状态下，待切换图片透明 */
#nextImg {
  opacity: 0;
}

修改后的JavaScript #

const images = [
  "https://picsum.photos/id/650/1000",
  "https://picsum.photos/id/651/1000",
  "https://picsum.photos/id/652/1000",
  "https://picsum.photos/id/653/1000",
];

const currentImg = document.getElementById("currentImg");
const nextImg = document.getElementById("nextImg");
let currentIndex;

// 初始化：随机加载第一张图
function initRandomStart() {
  currentIndex = Math.floor(Math.random() * images.length);
  currentImg.src = images[currentIndex];
  currentImg.style.opacity = 1;
}

// 执行交叉淡入淡出切换
function crossFade() {
  // 计算下一张图的索引（循环）
  const nextIndex = (currentIndex + 1) % images.length;
  // 设置待切换图片的源
  nextImg.src = images[nextIndex];
  
  // 触发过渡：当前图淡出，下一张图淡入
  currentImg.style.opacity = 0;
  nextImg.style.opacity = 1;

  // 过渡结束后，交换两个图片的角色，重置状态以便下一次切换
  setTimeout(() => {
    // 把当前图的src换成下一张图，恢复透明度
    currentImg.src = images[nextIndex];
    currentImg.style.opacity = 1;
    // 重置待切换图的透明度
    nextImg.style.opacity = 0;
    // 更新当前索引
    currentIndex = nextIndex;
  }, 800); // 这里的时长要和CSS里的transition时长一致
}

// 启动轮播
function startSlideshow() {
  initRandomStart();
  // 每5秒切换一次（可调整）
  setInterval(crossFade, 5000);
}

startSlideshow();

关键说明 #

• 用两张重叠的图片元素避免切换时露出背景，一张负责显示当前内容，另一张负责过渡
• 用CSS transition 替代JS定时器控制透明度变化，动画更流畅且代码更简洁
• 过渡结束后交换两张图的角色，确保下一次切换逻辑一致
• 随机起始逻辑和你的原代码保持一致，初始化时直接加载随机图片

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