页面上的javascript随机图片会在一段时间内加载和更改
[英]javascript random image on page load and change over a period of time
问题描述
I'm trying to get this function to run when the page is loaded so that the images will change over a period of time. 
我正在尝试让此功能在页面加载时运行，以便图像在一段时间内发生变化。 I can get this image to run onclick but it can't find a way for it run on load, i've tried everything I can find to try and do it 我可以让该图像运行onclick，但是找不到在负载下运行的方法，我已经尝试了所有可以尝试的方法
var imgArray = []
imgArray[0] = "url('../danallenfilms/images/screenshots/husky/shot1.png')";
imgArray[1] = "url('../danallenfilms/images/screenshots/husky/shot2.png')";
imgArray[2] = "url('../danallenfilms/images/screenshots/husky/shot3.png')";
imgArray[3] = "url('../danallenfilms/images/screenshots/husky/shot4.png')";
imgArray[4] = "url('../danallenfilms/images/screenshots/husky/shot5.png')";
var numOfImg = imgArray.length
function randomImg(){
var randomNum = Math.floor(Math.random()*(numOfImg));
document.getElementById('imgDisplay').style.backgroundImage = imgArray[randomNum];
};
setInterval(randomImg(), 1000);
5 个解决方案
解决方案1
1 2013-03-04 14:55:05
Try: 尝试：
var imgArray = []
imgArray[0] = "url('../danallenfilms/images/screenshots/husky/shot1.png')";
imgArray[1] = "url('../danallenfilms/images/screenshots/husky/shot2.png')";
imgArray[2] = "url('../danallenfilms/images/screenshots/husky/shot3.png')";
imgArray[3] = "url('../danallenfilms/images/screenshots/husky/shot4.png')";
imgArray[4] = "url('../danallenfilms/images/screenshots/husky/shot5.png')";
var numOfImg = imgArray.length,
elem = document.getElementById('imgDisplay');
setInterval(function () {
var randomNum = Math.floor(Math.random()*(numOfImg));
elem.style.backgroundImage = imgArray[randomNum];
}, 1000);
See the proper usage of setInterval here 在这里查看setInterval的正确用法
You may also have issues if your script is executed before the imgDisplay is loaded. 如果在加载imgDisplay之前执行了脚本，也可能会imgDisplay 。 You can fix that issue by putting the script above before closing the body tag. 您可以通过在关闭body标签之前将脚本放在上方来解决此问题。
解决方案2
0 2013-03-04 14:56:28
How about: 怎么样：
<body onload="setInterval(randomImg, 1000);">
...
</body>
解决方案3
0 2013-03-04 14:58:31
var imgArray = [
"url('../danallenfilms/images/screenshots/husky/shot1.png')",
"url('../danallenfilms/images/screenshots/husky/shot2.png')",
"url('../danallenfilms/images/screenshots/husky/shot3.png')",
"url('../danallenfilms/images/screenshots/husky/shot4.png')",
"url('../danallenfilms/images/screenshots/husky/shot5.png')"
];
var numOfImg = imgArray.length;
function randomImg(){
var randomNum = Math.floor(Math.random()*numOfImg);
document.getElementById('imgDisplay').style.backgroundImage = imgArray[randomNum];
}
setInterval('randomImg()', 1000);
try as this 这样尝试
解决方案4
0 2013-03-04 14:58:43
To make it run on page load you need to have a function which will be called on page load. 要使其在页面加载时运行，您需要具有一个将在页面加载时调用的函数。 Lets name it "onStart". 让我们将其命名为“ onStart”。 It will just include a single line, that is your setInterval line. 它仅包含一行，即您的setInterval行。 Also you will have to write some js in html code. 另外，您将不得不用html代码编写一些js。 That is find your body tag and add attribute "onload". 那就是找到您的身体标签并添加属性“ onload”。 Like this: 像这样：
<body onload="onStart()">
解决方案5
0 2013-03-04 15:19:24
The problem is your Math.random usage. 问题是您的Math.random使用情况。 Multiply the Math.random by 1000000 then use modulo ( % ) to get a number in a range: 将Math.random乘以1000000然后使用模（ % ）得到一个范围内的数字：
var imgArray = [
"url('../danallenfilms/images/screenshots/husky/shot1.png')",
"url('../danallenfilms/images/screenshots/husky/shot2.png')",
"url('../danallenfilms/images/screenshots/husky/shot3.png')",
"url('../danallenfilms/images/screenshots/husky/shot4.png')",
"url('../danallenfilms/images/screenshots/husky/shot5.png')"];
function randomImg() {
var randomNum = (Math.floor((Math.random() * 1000000000)) % (imgArray.length - 1));
document.body.style.backgroundImage = imgArray[randomNum];
}
setInterval(randomImg, 1000);
randomImg();
Here's an example: http://jsfiddle.net/howderek/swYcf/ 这是一个示例： http : //jsfiddle.net/howderek/swYcf/
Fullscreen: http://jsfiddle.net/howderek/swYcf/embedded/result/ 全萤幕： http ： //jsfiddle.net/howderek/swYcf/embedded/result/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.