Javascript 设置时间后刷新的随机图像

所以之前我问过如何创建一个javascript，它可以自动从目录中随机选取一个图像

然而，这个脚本工作得非常完美。我想修改脚本，让它随机挑选一个图像加载（它已经这样做了），然后，在设定的时间后，如10秒，将淡出和一个新的随机挑选的图像将淡入

以下是现行守则：

function randomImage() {

var fileNames = [
    "1.jpg",
    "2.jpg",
    "3.jpg"
];

var randomIndex = Math.floor(Math.random() * fileNames.length);

document.getElementById("background").background = "backgrounds/" + fileNames[randomIndex];
}

---

谢谢大家!

您可以像这样定期调用函数。第一个调用是第一次设置映像。如果您已经在使用它，请忽略它

randomImage();
setInterval(randomImage,10000);

---

给你，就像以前一样，只是我添加了

setTimeout（）

传递一个匿名函数，该函数每10秒10000毫秒调用一次

randomImage（）

函数

函数randomImage（）{
变量文件名=[
“1.jpg”，
“2.jpg”，
“3.jpg”
];
var randomIndex=Math.floor（Math.random（）*fileNames.length）；
document.getElementById（“background”）.background=“backgrounds/”+文件名[randomIndex]；
setTimeout（函数（）{
随机图像（）；
}, 10000);
}

使用

DOMElement.style.background

而不是

DOMElement.background

来设置HTML元素的背景

要在特定持续时间后执行特定函数或表达式，请使用

Window setInterval（）

。它接受两个参数。第一个参数是回调函数，第二个参数是间隔

注意：此示例将更改元素的

背景
样式。它不会为您提供
fadeIn/fadeOut
动画

试试这个：


函数randomImage（）{
变量文件名=[
"http://ryanlb.com/images/other/images/getter-dragon-1.jpg",
"http://ryanlb.com/images/other/images/getter-dragon-2.jpg"
];
var randomIndex=Math.floor（Math.random（）*fileNames.length）；
document.getElementById（“background”）.style.background='url（'+fileNames[randomIndex]+'）；
}
随机图像（）；
设置间隔（随机图像，10000）
*{
填充：0；
保证金：0；
}
html，
身体{
宽度：100%；
身高：100%；
}
#背景{
宽度：100%；
身高：100%；
背景尺寸：100%自动；
}
您希望设置元素背景url，使其符合需要

document.getElementById("background").style.background = "url('backgrounds/" + fileNames[randomIndex]+"')";

如果要设置图像url

document.getElementById("background").src= "backgrounds/" + fileNames[randomIndex];

我看到你的代码包含setInterval（）-你的解释不应该也包含它吗？@nnnnnn，我没有耐心测试这个场景，所以我缩短了持续时间..我想OP可以很容易地解释出来..是的，我必须添加关于它的解释..你不需要匿名函数：
setTimeout（randomImage，10000）
。我如何添加淡出当前图像、加载新图像但淡入的功能？@nnnnnn True我刚刚写下了我喜欢做的事情。在这个问题的上下文中，我认为似乎需要一个额外的步骤来处理fadeIn和fadeOut图像。@Munch您使用过jQuery吗？有内置函数来淡入和淡出DOM元素。用于使用jQuery。如果你想使用纯JavaScript，这是一个很好的起点。@HowardCombs我已经尝试了其他stackoverflow文章中包含的一些东西，但似乎都不管用。我也看过你的教程，但我不知道如何在我已经存在的javascript中实现它。更难的是，图像是身体的背景，所以我想这让我很困惑。