如何解决div背景图循环切换时仅显示最后一张图不迭代的问题

问题原因 #

原代码的逻辑存在错误：setInterval每隔3秒触发一次回调，回调内部的for循环会在几毫秒内跑完所有背景图的赋值操作，浏览器渲染来不及响应循环过程，因此每次定时器触发后你只能看到循环结束后的最后一张背景图。

修复代码 #

我们只需要维护一个当前展示的图片索引，每次定时器触发时仅切换到下一张图，配合取模运算实现无限循环即可：

let wrapper = document.querySelector('.wrapper');
let backImages = ['backimage1.jpg', 'backimage2.jpg', 'backimage3.jpg'];
// 记录当前展示的图片索引，初始值为0对应第一张图
let currentIndex = 0;

const changeBg = () => {
  wrapper.style.background = `url('${backImages[currentIndex]}')`;
  // 索引自增后对数组长度取模，超过数组长度自动回到0
  currentIndex = (currentIndex + 1) % backImages.length;
};

// 页面加载立即执行一次，避免前3秒无背景图
changeBg();
// 每3秒切换一次背景
setInterval(changeBg, 3000);

可选优化：添加平滑过渡效果 #

如果需要切换时的淡入淡出效果，给wrapper元素添加对应的CSS过渡属性即可：

.wrapper {
  /* 原有样式保留，新增以下属性 */
  transition: background 0.6s ease-in-out;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

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