网站无法实现定时自动切换背景图片功能，求问题排查及修复方案

第一组代码存在的问题 #

• HTML内联样式语法错误：同时声明了两次background-image属性，正确的多背景图写法是逗号分隔url，且代码中图片文件名大小写不统一（JS里是Space.gif/Windows.gif，HTML里写的是小写space.gif），路径不匹配会导致图片加载失败。
• 样式规则不匹配：CSS的背景属性全部加在了body上，但实际背景是绑定在.bg-img元素上，且没有给.bg-img设置宽高和定位，默认元素高度为0，背景无法显示。
• 数组声明末尾多了冗余逗号，部分低版本浏览器会抛出语法错误。

第二组代码存在的问题 #

• 元素选择错误：document.querySelector('selection')选择的是不存在的selection标签，无法找到要修改背景的目标元素。
• 定时器间隔设置错误：setInterval的第二个参数单位是毫秒，1000000毫秒约等于16.6分钟，间隔太长无法观测到切换效果。
• 随机切换逻辑无去重，可能出现连续多次显示同一张图的情况。

提供两种实现方案，按需选择即可：

基础通用代码（两种方案都需要） #

<!-- HTML -->
<div class="bg-img">
  <div class="overlay"></div>
</div>

/* CSS */
.bg-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  z-index: -1; /* 保证背景在页面内容最底层 */
}
.overlay {
  /* 不需要遮罩层可直接删除该类样式 */
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

方案1：顺序轮播切换（10秒切换一次） #

const images = ['Space.gif', 'Windows.gif'];
let currentIndex = 0;
// 初始化第一张背景
document.querySelector('.bg-img').style.backgroundImage = `url(${images[currentIndex]})`;
setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  document.querySelector('.bg-img').style.backgroundImage = `url(${images[currentIndex]})`;
}, 10000);

方案2：随机切换（10秒切换一次，避免连续重复） #

const images = ['Space.gif', 'Windows.gif'];
// 初始化第一张背景
document.querySelector('.bg-img').style.backgroundImage = `url(${images[Math.floor(Math.random()* images.length)]})`;
setInterval(() => {
  let randomIndex;
  // 去重逻辑，避免连续两张图一致
  do {
    randomIndex = Math.floor(Math.random()* images.length);
  } while(document.querySelector('.bg-img').style.backgroundImage.includes(images[randomIndex]))
  document.querySelector('.bg-img').style.backgroundImage = `url(${images[randomIndex]})`;
}, 10000);

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