如何使用Javascript实现背景图片每3秒自动切换

你代码存在3个核心问题导致无效果：

• 错误调用setAttribute方法：该方法是DOM元素专属方法，你对存储路径的数组imageArray直接调用会抛出JS类型错误，代码直接终止运行
• 切换间隔不符合需求：你需要3秒切换，当前设置的5000对应的是5秒
• 缺少初始加载逻辑：页面初始化时不会自动执行切换逻辑，第一张图默认不会加载显示

修复方案 #

1. 先在HTML中添加img标签（如果是背景图场景可跳过这步，直接修改JS逻辑）：

<img id="carouselImg" width="100%" height="400" alt="轮播图">

2. 替换为修复后的JS代码：

var imageArray = [
  "assets/background1.jpeg",
  "assets/background2.jpeg",
  "assets/background3.jpeg"
];
// 获取目标img DOM节点
var carouselImg = document.getElementById("carouselImg");
var imageIndex = 0; 

function changeImage() {
  // 给DOM节点设置src属性
  carouselImg.setAttribute("src", imageArray[imageIndex]);
  imageIndex = (imageIndex + 1) % imageArray.length;
}
// 初始化加载第一张图
changeImage();
// 间隔设置为3000毫秒 = 3秒
setInterval(changeImage, 3000);

如果是要给元素设置背景图，将changeImage方法修改为对应逻辑即可，示例：

function changeImage() {
  // 示例：给body设置背景图
  document.body.style.backgroundImage = `url(${imageArray[imageIndex]})`;
  imageIndex = (imageIndex + 1) % imageArray.length;
}

额外注意：请确认assets目录下的图片路径、文件名、后缀和数组中配置的完全一致，避免资源404导致图片不显示。

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