Question

所以早些时候我问过创建一个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];
}

谢谢！

Answer 1

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

randomImage();
setInterval(randomImage,10000);

Answer 2

在这里你就像我之前添加setTimeout()一样传递一个匿名函数，每10秒调用randomImage()函数，10000毫秒。

＆＃13;

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];
  setTimeout(function() {
    randomImage();
  }, 10000);
}

＆＃13;

Answer 3

使用DOMElement.style.background代替DOMElement.background来设置HTML元素的背景。

要在特定时间段后执行某些功能或表达，请使用Window setInterval()。它接受2个参数。第一个参数是Callback function，第二个参数是区间。

注意：此示例将更改元素的background样式。它不会给你fadeIn/fadeOut动画。

试试这个：

function randomImage() {
  var fileNames = [
    "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] + ')';

}
randomImage();
setInterval(randomImage, 10000);

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#background {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
}

<div id="background"></div>

Fiddle here

Answer 4

你想设置元素背景网址，所以它需要像

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

如果你想设置图片网址，

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

随机图像在设定时间后刷新

4 个答案: