Javascript 随机背景图像每5秒？_Javascript_Image_Random_Colors

Javascript 随机背景图像每5秒？

javascript image random colors

Javascript 随机背景图像每5秒？,javascript,image,random,colors,Javascript,Image,Random,Colors,我基本上找到了这段代码，并尝试对其进行一些修改。我尝试用图像代替颜色，但效果不是很好。我已经检查了其他类似的问题，但它并没有完全给我的帮助，我一直在寻找，无论如何正如您在代码中看到的，它每5000毫秒随机更改背景颜色，我想知道如何使它随机更改图片（背景图像）而不是颜色 <script type="text/javascript"> function setbackground() { window.setTimeout( "setbackground()", 5000); //

我基本上找到了这段代码，并尝试对其进行一些修改。我尝试用图像代替颜色，但效果不是很好。我已经检查了其他类似的问题，但它并没有完全给我的帮助，我一直在寻找，无论如何

正如您在代码中看到的，它每5000毫秒随机更改背景颜色，我想知道如何使它随机更改图片（背景图像）而不是颜色

<script type="text/javascript">

function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF"; // default color - white (index = 0)

if(index == 1)
ColorValue = "FFCCCC"; //peach
if(index == 2)
ColorValue = "CCAFFF"; //violet
if(index == 3)
ColorValue = "A6BEFF"; //lt blue
if(index == 4)
ColorValue = "99FFFF"; //cyan
if(index == 5)
ColorValue = "D5CCBB"; //tan
if(index == 6)
ColorValue = "99FF99"; //lt green
if(index == 7)
ColorValue = "FFFF99"; //lt yellow
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;

}
</script>
<body onload="setbackground();">


功能背景（）
{
setTimeout（“setbackground（）”，5000）；//延迟5000毫秒
var index=Math.round（Math.random（）*9）；
var ColorValue=“FFFFFF”；//默认颜色-白色（索引=0）
如果（索引==1）
ColorValue=“FFCCCC”；//桃子
如果（索引==2）
ColorValue=“CCAFFF”；//紫色
如果（索引==3）
ColorValue=“A6BEFF”；//lt蓝色
如果（索引==4）
ColorValue=“99FFFF”；//青色
如果（索引==5）
ColorValue=“D5CCBB”//tan
如果（索引==6）
ColorValue=“99FF99”//lt绿色
如果（索引==7）
ColorValue=“FFFF99”；//lt黄色
如果（索引==8）
ColorValue=“FFCC99”；//lt橙色
如果（索引==9）
ColorValue=“cccc”；//lt灰色
document.getElementsByTagName（“body”）[0].style.backgroundColor=“#”+ColorValue；
}

您可以这样做：

  <script type="text/javascript">

function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ImagePath = "image0.jpg"; // default image

if(index == 1)
ImagePath = "image1.jpg"; 
if(index == 2)
ImagePath = "image2.jpg";
if(index == 3)
ImagePath = "image3.jpg";
if(index == 4)
ImagePath = "image4.jpg";
if(index == 5)
ImagePath = "image5.jpg"; 
if(index == 6)
ImagePath = "image6.jpg"; 
if(index == 7)
ImagePath = "image7.jpg"; 
if(index == 8)
ImagePath = "image8.jpg"; 
if(index == 9)
ImagePath = "image9.jpg"; 

document.getElementsByTagName("body")[0].style.backgroundImage="url('"+ ImagePath+ "')"

}
</script>
<body onload="setbackground();">


功能背景（）
{
setTimeout（“setbackground（）”，5000）；//延迟5000毫秒
var index=Math.round（Math.random（）*9）；
var ImagePath=“image0.jpg”；//默认图像
如果（索引==1）
ImagePath=“image1.jpg”；
如果（索引==2）
ImagePath=“image2.jpg”；
如果（索引==3）
ImagePath=“image3.jpg”；
如果（索引==4）
ImagePath=“image4.jpg”；
如果（索引==5）
ImagePath=“image5.jpg”；
如果（索引==6）
ImagePath=“image6.jpg”；
如果（索引==7）
ImagePath=“image7.jpg”；
如果（索引==8）
ImagePath=“image8.jpg”；
如果（索引==9）
ImagePath=“image9.jpg”；
document.getElementsByTagName（“正文”）[0].style.backgroundImage=“url（“+ImagePath+”）”
}

这里有一个简单的方法：

function setBackground(urls, targetId) {
    setInterval(function() {
        var index = Math.floor(Math.random() * (urls.length));
        var target = document.getElementById(targetId);
        target.style.backgroundImage = "url(" + urls[index] + ")";

    }, 5000);
}

其中，

url

是图像url的数组，

targetId

是要更改其

背景图像

属性的容器的ID

（与小猫一起）

--编辑--

请记住，在加载新图像时，背景（背景图像后面）是可见的。为了说明这一点，我将

背景色设置为红色。当一个新的图像开始加载时，你会看到一道红色的闪光（讽刺的是，这符合小猫的主题）
--编辑2--
我重读了你的问题，看起来你想改变身体的背景图像。上面的函数（以及JSFIDLE中的函数）针对目标ID工作。如果您想在主体上使用它，可以为主体提供一个ID，并使用主体ID作为参数运行该函数。或者，您可以使用：
function setBackground(urls) {
    setInterval(function() {
        var index = Math.floor(Math.random() * (urls.length));
        var target = document.getElementsByTagName("body")[0];
        target.style.backgroundImage = "url(" + urls[index] + ")";

    }, 5000);
}

你是如何设置背景图像的？显示该代码。。。。