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

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

＆＃13;

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();

＆＃13;

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

基于：LINK

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

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

3 个答案: