背景图片淡入淡出过渡不流畅问题求助

长期未接触Web开发，目前搭建个人网站时想要实现背景图片的淡入淡出切换效果，逻辑上代码框架看似可行，但实际切换十分突兀。已尝试调整transition、timeout参数，用红/绿/蓝纯色图测试仍无改善，相关代码如下：

现有代码 #

JavaScript #

window.onload = changeBackgroundImage;

var imageIndex = 1;
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var imagePath = isMobile ? 'assets/img/mobBg/' : 'assets/img/bg/';
var imageExtension = '.png';
var errorCount = 0;

function changeBackgroundImage() {
  var currentBg = document.getElementById('bg1');
  var nextBg = document.getElementById('bg2');

  var img = new Image();
  img.src = imagePath + imageIndex + imageExtension;
  console.log('Loading image:', img.src);
  img.onload = function() {
    nextBg.style.backgroundImage = 'url(' + img.src + ')';
    setTimeout(function() {
      currentBg.style.opacity = '0'; // Start the fade-out of the current image
    }, 7000); // Start the fade-out after 7 seconds
    setTimeout(function() {
      var temp = currentBg;
      currentBg.style.zIndex = '1'; // Move the current image underneath
      nextBg.style.zIndex = '2'; // Bring the next image to the top
      currentBg.style.opacity = '1'; // Reset the opacity of the current image
      currentBg = nextBg;
      nextBg = temp;
      imageIndex++;
    }, 10000); // Swap the images after 10 seconds (the duration of the fade-out plus 3 seconds)
    errorCount = 0; // Reset error count on successful load
    setTimeout(changeBackgroundImage, 10000); // Change image every 10 seconds
  };
  img.onerror = function() {
    console.log('Failed to load image:', img.src);
    if (errorCount < 10) { // If less than 10 consecutive errors
      errorCount++;
      imageIndex++;
      changeBackgroundImage();
    } else { // If 10 or more consecutive errors
      errorCount = 0;
      imageIndex = 1;
      changeBackgroundImage();
    }
  };
}

CSS #

#bg1 {
  opacity: 1;
  transition: opacity 5s ease-in-out;
  z-index: 2;
  /* bg1 is initially on top */
}

#bg2 {
  opacity: 1;
  z-index: 1;
  /* bg2 is initially underneath */
}

HTML #

<div id="bg1" class="bg visible"></div>
<!-- Add the 'visible' class to 'bg1' -->
<div id="bg2" class="bg hidden"></div>
<!-- Add the 'hidden' class to 'bg2' -->

问题排查与修正方案 #

核心问题分析 #

1. 初始状态错误：两个背景层初始opacity均为1，#bg2虽在下层但已完全显示，导致#bg1淡出后直接暴露已完全不透明的#bg2，没有淡入过程
2. 过渡逻辑缺失：仅处理了当前背景的淡出，未同步触发下一张背景的淡入
3. 布局基础缺失：.bg类未设置定位、宽高，可能导致背景层未完全覆盖视口，过渡效果被截断
4. DOM重复查询：每次调用函数都重新查询DOM元素，影响性能且易引发状态混乱

修正后代码 #

1. 完善CSS基础样式

.bg {
  /* 确保背景层全屏覆盖 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 优化背景图片显示 */
  background-size: cover;
  background-position: center;
  /* 统一过渡效果，时长可按需调整 */
  transition: opacity 3s ease-in-out;
}

#bg1 {
  opacity: 1;
  z-index: 2;
}

#bg2 {
  opacity: 0; /* 初始隐藏下层背景 */
  z-index: 1;
}

2. 优化JavaScript逻辑

window.onload = changeBackgroundImage;

var imageIndex = 1;
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var imagePath = isMobile ? 'assets/img/mobBg/' : 'assets/img/bg/';
var imageExtension = '.png';
var errorCount = 0;

/* 缓存DOM元素，避免重复查询 */
var bg1 = document.getElementById('bg1');
var bg2 = document.getElementById('bg2');
var currentBg = bg1;
var nextBg = bg2;

function changeBackgroundImage() {
  var img = new Image();
  img.src = imagePath + imageIndex + imageExtension;
  console.log('Loading image:', img.src);
  
  img.onload = function() {
    // 给下层背景设置新图片
    nextBg.style.backgroundImage = `url(${img.src})`;
    
    // 7秒展示后，同步触发当前层淡出、下一层淡入
    setTimeout(() => {
      currentBg.style.opacity = '0';
      nextBg.style.opacity = '1';
    }, 7000);
    
    // 过渡完成后（7秒展示 + 3秒过渡），重置状态并准备下一次切换
    setTimeout(() => {
      // 交换层级，让新背景保持在上层
      currentBg.style.zIndex = '1';
      nextBg.style.zIndex = '2';
      // 重置被隐藏的背景透明度，为下一次切换做准备
      currentBg.style.opacity = '1';
      // 交换当前/下一个背景的引用
      [currentBg, nextBg] = [nextBg, currentBg];
      imageIndex++;
      errorCount = 0;
      // 安排下一次切换（总间隔10秒）
      setTimeout(changeBackgroundImage, 10000);
    }, 10000);
  };
  
  img.onerror = function() {
    console.log('Failed to load image:', img.src);
    if (errorCount < 10) {
      errorCount++;
      imageIndex++;
      changeBackgroundImage();
    } else {
      errorCount = 0;
      imageIndex = 1;
      changeBackgroundImage();
    }
  };
}

3. 简化HTML结构

<div id="bg1" class="bg"></div>
<div id="bg2" class="bg"></div>

修正后效果说明 #

• 背景层全屏覆盖视口，不会出现布局错位
• 每次切换时，当前背景平滑淡出的同时，下一张背景同步淡入，实现自然过渡
• 缓存DOM元素提升性能，状态逻辑更清晰

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