如何用JS实现Div背景图每秒切换？我的代码无法运行求助

我正在开发一个旅行博客，想要用JS让id为title的div背景图每秒切换，同时在图上显示文字。参考教程写的代码无法生效，附上CSS和JS代码，怀疑图片过大或JS基础不足，调整变量位置和语句后仍无效，求帮助。

原CSS代码 #

#title{
    background-image: url("../images/Nature5.jpg");
    background-size: cover;
    padding-top: 350px;
    padding-bottom: 350px;
}

原JS代码 #

var changingImages = document.querySelector('title');

var images = [
   "url('../images/Nature1.jpg')",
   "url('../images/Nature2.jpg')",
   "url('../images/Nature3.jpg')",
   "url('../images/Nature4.jpg')",
   "url('../images/Nature5.jpg')",
   "url('../images/Nature6.jpg')"
    ]


setInterval( function () {
   var bg = images[Math.floor(Math.random() * images.length)]
   title.style.backgroundImage = bg;
},1000)

问题排查与修复方案 #

• 选择器错误：document.querySelector('title')选中的是页面的<title>标签，而非id为title的div，应该改为document.querySelector('#title')（id选择器需要加#）
• 变量名不匹配：定义的变量是changingImages，但后续操作时用的是未定义的title，需要统一变量名
• （可选）图片路径优化：数组中url()内部的单引号可以省略，不影响功能但写法更规范

修正后的JS代码 #

// 正确选中id为title的div
var title = document.querySelector('#title');

var images = [
   "url('../images/Nature1.jpg')",
   "url('../images/Nature2.jpg')",
   "url('../images/Nature3.jpg')",
   "url('../images/Nature4.jpg')",
   "url('../images/Nature5.jpg')",
   "url('../images/Nature6.jpg')"
];

setInterval(function () {
   var bg = images[Math.floor(Math.random() * images.length)];
   title.style.backgroundImage = bg;
}, 1000);

额外优化建议 #

• 图片预加载：如果图片过大导致切换卡顿，可以提前预加载所有图片，避免延迟：

  // 预加载图片
  images.forEach(function(imgUrl) {
      var img = new Image();
      img.src = imgUrl.replace(/^url\(['"]?|['"]?\)$/g, ''); // 提取图片路径
  });
  

• 文字显示：在#title div内添加文字元素，用CSS定位到背景图上方：

  <div id="title">
      <h1 class="title-text">我的旅行博客</h1>
  </div>
  

  对应的CSS：

  #title{
      position: relative;
      background-image: url("../images/Nature5.jpg");
      background-size: cover;
      padding-top: 350px;
      padding-bottom: 350px;
  }
  .title-text{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 2rem;
      text-shadow: 0 0 5px rgba(0,0,0,0.8);
  }
  

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