如何在点击事件中循环遍历数组实现JS背景轮播

你的问题出在点击事件里用了for循环——每次点击按钮都会一次性遍历完整个图片数组，自然会直接跳到最后一张，而不是每次切换一张。我们只需要一个变量来跟踪当前显示的图片索引，每次点击更新索引并切换背景即可，最后一张之后回到第一张。

首先修正代码里的小错误：documentQuerySelector应该是document.querySelector，这是API名称写错了。

下面是完整的实现代码：

HTML部分 #

<button id="btn">Next</button>

JavaScript部分 #

const backgrounds = ["bgr1.jpg", "bgr2.jpg", "bgr3.jpg"];
const btn = document.querySelector("#btn");
// 初始化当前索引，从第一张图开始
let currentIndex = 0;

btn.addEventListener("click", function() {
  // 每次点击索引+1，用取模运算实现循环：当索引等于数组长度时，取模后回到0
  currentIndex = (currentIndex + 1) % backgrounds.length;
  // 设置body的背景图，注意用url()包裹图片路径
  document.body.style.backgroundImage = `url(${backgrounds[currentIndex]})`;
});

// 可选：页面加载时先设置第一张背景图
document.body.style.backgroundImage = `url(${backgrounds[currentIndex]})`;

关键逻辑说明 #

• currentIndex变量用来记录当前显示的图片在数组中的位置，放在事件监听外面，这样每次点击都能保留上一次的索引值。
• (currentIndex + 1) % backgrounds.length：取模运算可以自动帮我们处理循环逻辑——比如数组长度是3，当currentIndex是2（第三张图）时，+1变成3，3%3=0，就回到第一张图的索引了。
• 设置backgroundImage时必须用url()包裹图片路径，这是CSS的语法要求。

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