设置时间后刷新随机图像

Random Image refreshed after set time

本文关键字：随机 图像 刷新 时间 设置      更新时间：2023-09-26

所以之前我问过创建一个javascript，它会自动从a目录中随机挑选一个图像。

但是，该脚本运行良好。我想修改脚本，以便它随机选择一个图像进行加载（它已经这样做了），然后在设定的时间（如 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() 函数。

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

使用 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>

在这里摆弄

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

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

如果要设置图片网址，

document.getElementById("background").src= "backgrounds/" + fileNames[randomIndex];
相关文章：