如何使用 javascript 创建循环 html 更改背景图像

Question

我的 JavaScript 脚本旨在不断更改我的 HTML 页面的背景图像，但不会执行预期的操作。

function CB() {
try {
    var p = {
      Pic1: 'Images/CoolPic2.jpg',
      Pic2: 'Images/CoolPic3.jpg',
      Pic3: 'Images/CoolPic4.jpg'
   };
   var l = p.length;
    i = 0;
    while (i < l) {
        setTimeout(function(){document.body.style.backgroundImage = url(p[i]); }, 3000)
        i += 1;
        if (i > l) {
            i -= l;
            }
    }
}
catch(err) {
    alert(err.message);
}
}

Answer 1

你不需要 while 循环。 只需使用 setInterval （这将每 3 秒调用一次该函数）而不是 setTimeout （这将调用一次）。 尝试这个

 function CB() { try { var p = [ 'Images/CoolPic2.jpg', 'Images/CoolPic3.jpg', 'Images/CoolPic4.jpg' ]; var counter = 0; setInterval(function(){ //document.body.style.backgroundImage = url(p[counter++]); console.log(counter++); if(counter == 3){ counter = 0; } }, 3000) } catch(err) { alert(err.message); } } CB();

Answer 2

这样接缝没问题：

 let i = 1; // = 1 because we want to load first color/image onload const color = ["black", "blue", "brown", "green"]; //change colors to url's change = () => { document.body.style.backgroundColor = color[i];//change to background= url(color[i]) i = (i + 1) % color.length; } document.body.style.backgroundColor = color[0]; // this will load first collor/image setInterval(change, 3000);

基于： 链接

Answer 3

我想这可能会有所帮助！！！

var images = [
   'Images/CoolPic2.jpg',
   'Images/CoolPic3.jpg',
   'Images/CoolPic4.jpg'
];

var count = 0;

setInterval(()=> {
   body.style.backgroundImage = 
      "url(" + images[count++] + ")";
   if (count == 3) {
      counter = 0;
   }
}, 3000);