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

我的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);
}
}

函数CB（）{
试一试{
var p={
Pic1:'Images/CoolPic2.jpg'，
Pic2:'Images/CoolPic3.jpg'，
图片3:'Images/CoolPic4.jpg'
};
var l=p.长度；
i=0；
而（il）{
i-=l；
}
}
}
捕捉（错误）{
警报（错误消息）；
}
}

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

函数CB（）{
试一试{
var p=[
'Images/CoolPic2.jpg'，
'Images/CoolPic3.jpg'，
“Images/CoolPic4.jpg”
];
var计数器=0；
setInterval（函数（）{
//document.body.style.backgroundImage=url（p[counter++]）；
console.log（counter++）；
如果（计数器==3）{
计数器=0；
}
}, 3000)
}捕捉（错误）{
警报（错误消息）；
}
}
CB（）您不需要while循环。只需使用setInterval（这将每3秒调用一次函数）而不是setTimeout（这将调用一次）。试试这个


函数CB（）{
试一试{
var p=[
'Images/CoolPic2.jpg'，
'Images/CoolPic3.jpg'，
“Images/CoolPic4.jpg”
];
var计数器=0；
setInterval（函数（）{
//document.body.style.backgroundImage=url（p[counter++]）；
console.log（counter++）；
如果（计数器==3）{
计数器=0；
}
}, 3000)
}捕捉（错误）{
警报（错误消息）；
}
}
CB（）这样可以：


设i=1；//=1因为我们要加载第一个颜色/图像onload
常量颜色=[“黑色”、“蓝色”、“棕色”、“绿色”]//更改url的颜色
更改=（）=>{
document.body.style.backgroundColor=color[i]；//更改为background=url（color[i]）
i=（i+1）%color.length；
}
document.body.style.backgroundColor=颜色[0]；//这将加载第一个collor/image
设置间隔（更改，3000）这样可以：


设i=1；//=1因为我们要加载第一个颜色/图像onload
常量颜色=[“黑色”、“蓝色”、“棕色”、“绿色”]//更改url的颜色
更改=（）=>{
document.body.style.backgroundColor=color[i]；//更改为background=url（color[i]）
i=（i+1）%color.length；
}
document.body.style.backgroundColor=颜色[0]；//这将加载第一个collor/image
设置间隔（更改，3000）我想这可能会有帮助

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

我想这可能会有帮助

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

p是物体。。。p应该是数组吗？我只知道如何以这种方式存储数据。
p.length
未定义，因为它是一个对象。我尝试将p设置为数组，但没有任何效果。这是因为您没有正确设置
backgroundImage
。即使这段代码有效，它也不会做您期望它做的事情。当它离开
而
时，在超时3秒之前，它会将背景图像更改为数组的最后一个（Images/CoolPic4.jpg）。p是对象。。。p应该是数组吗？我只知道如何以这种方式存储数据。
p.length
未定义，因为它是一个对象。我尝试将p设置为数组，但没有任何效果。这是因为您没有正确设置
backgroundImage
。即使这段代码有效，它也不会做您期望它做的事情。当它离开
而
时，在超时3秒之前，它会将背景图像更改为数组的最后一个（Images/CoolPic4.jpg）。请检查以改进格式。请检查以改进格式。