javascript - 重复 div 的背景图像

Question

我正在尝试更改 div 的背景图像，但不知何故它运行一次并显示最后一个图像而不是迭代。

JS

let wrapper = document.querySelector('.wrapper');
let backImages = ['backimage1.jpg', 'backimage2.jpg', 'backimage3.jpg'];

// First way
setInterval(() => {
  for (let bg in backImages) {
    wrapper.style.background = `url('${backImages[bg]}')`;
  }
}, 3000);

// Second way
let changeBg = () => {
  for (let bg in backImages) {
    wrapper.style.background = `url('${backImages[bg]}')`;
  }
};

setInterval(changeBg, 3000);

我怎样才能让它无休止地迭代所有图像。

标签： javascript

Answer 1

我希望这是你需要的：

let wrapper = document.querySelector('.wrapper');
let backImages = ['backimage1.jpg', 'backimage2.jpg', 'backimage3.jpg'];
wrapper.style.background = `url('${backImages[0]}')`;
let startIndex = 0;

setInterval(() => {
  startIndex = startIndex + 1;
  if (startIndex == backImages.length) {
    startIndex = 0;
  }

  wrapper.style.background = `url('${backImages[startIndex]}')`;
}, 3000);

<div class="wrapper"></div>