重复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);

我怎样才能使它在所有图像上不断迭代。

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>

Answer 2

啊，这是因为函数在一次执行forloop。

3秒后启动功能。做ForLoop改变1改变2改变3然后应用。

您将需要在此之外有一个迭代。

let wrapper = document.querySelector('.wrapper');
let backImages = ['backimage1.jpg', 'backimage2.jpg', 'backimage3.jpg'];
//Set a cycle count, and get the max number in your array.
var bgCycleCount = 0;
var bgCycleMax = backImages.length;

setInterval(() => {
//Apply the BG for the current array position.
wrapper.style.background = `url('${backImages[bgCycleCount]}')`;
if(bgCycleCount == bgCycleMax) {
bgCycleCount = 0; //Reset if you've reached the end
} else {
bgCycleCount++; //If not the end, increment the array position
}
}, 3000);

Answer 3

在这两种情况下，您都是从头开始运行循环。

let wrapper = document.querySelector('.wrapper');
let backImages = ['https://www.thespruce.com/thmb/2fz1zlPNq7cj7QkLAtKdqYrKvs0=/3704x2778/smart/filters:no_upscale()/the-difference-between-trees-and-shrubs-3269804-hero-a4000090f0714f59a8ec6201ad250d90.jpg',
'https://www.sciencenewsforstudents.org/wp-content/uploads/2020/04/1030_LL_trees-1028x579.png', 'https://m.media-amazon.com/images/I/71WcZqPYToL._SL1200_.jpg'
];
let count = 0;
setInterval(() => {
wrapper.style.background = `url('${backImages[count]}')`;
count = count === backImages.length - 1 ? 0 : count + 1;
}, 3000);

.wrapper {
width: 500px;
height: 500px;
border: 1px solid red;
}

<div class='wrapper'></div>