使用SetInterval实现hero区域背景图轮播时出现undefined报错如何解决

• 第一个报错Uncaught TypeError: Cannot set properties of undefined (setting 'background')是因为JS代码执行时，页面DOM还未渲染完成，document.getElementById('hero')无法获取到对应元素，返回值为null，对空值设置style属性就会触发该报错。
• 第二个url('undefined')报错是第一个错误衍生的问题：元素获取失败后代码逻辑仍然执行，数组下标i会异常累加超过数组长度，取images[i]时返回undefined，拼接为url后就出现该问题。
• 额外无过渡效果的原因：你CSS中设置的过渡属性是opacity，但JS逻辑中仅修改background属性，背景图切换本身不支持过渡动画，同时直接覆盖background属性会清空你原CSS中设置的渐变、定位、fixed等配置。

你可以继续保留setInterval的实现逻辑，按如下调整代码即可：

1. 用DOMContentLoaded事件包裹JS逻辑，保证DOM渲染完成后再获取元素
2. 不要直接覆盖整个background属性，仅修改backgroundImage保留原有CSS配置
3. 配合你设置的opacity过渡属性实现淡入淡出的切换效果

修复后JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const images = [
    'https://via.placeholder.com/728x90.png?text=slide1',
    'https://via.placeholder.com/728x90.png?text=slide2',
    'https://via.placeholder.com/728x90.png?text=slide3',
    'https://via.placeholder.com/728x90.png?text=slide4',
  ];
  const container = document.getElementById('hero');
  let i = 1; // 首屏默认已加载第一张图，从第二张开始切换
  setInterval(function() {
    // 先将透明度降为0触发淡出过渡
    container.style.opacity = 0;
    setTimeout(() => {
      // 替换背景图，保留原有渐变配置
      container.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.342), rgba(0, 0, 0, 0.342)), url('${images[i]}')`;
      // 透明度恢复为1触发淡入过渡
      container.style.opacity = 1;
      // 简化数组下标循环逻辑
      i = (i + 1) % images.length;
    }, 1000); // 等待淡出动画完成再切换图片，时长和CSS过渡时长一致
  }, 4000); // 每张图展示时长，可自行调整，需大于过渡时长避免动画重叠
})

调整后CSS代码（可选优化） #

#hero {
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.342), rgba(0, 0, 0, 0.342)), url('https://via.placeholder.com/728x90.png?text=slide1') fixed no-repeat center / cover;
  color: #fff9ff;
  transition: opacity 1s ease; /* 新增ease函数让过渡更自然 */
  opacity: 1;
}

HTML代码无需修改。

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