0

我试图让这个函数在页面加载时运行，以便图像会在一段时间内发生变化。我可以让这张图片在点击时运行，但它找不到在加载时运行的方法，我已经尝试了所有我能找到的东西来尝试去做

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

5 回答 5

1

尝试：

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

请参阅此处的正确用法setInterval

如果您的脚本在imgDisplay加载之前执行，您也可能会遇到问题。body您可以通过在关闭标签之前将脚本放在上面来解决该问题。

于 2013-03-04T14:55:05.837 回答
0

怎么样：

<body onload="setInterval(randomImg, 1000);">
...
</body>
于 2013-03-04T14:56:28.883 回答
0

问题是您的 Math.random 用法。乘以然后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();

这是一个例子：http: //jsfiddle.net/howderek/swYcf/

全屏：http: //jsfiddle.net/howderek/swYcf/embedded/result/

于 2013-03-04T15:19:24.227 回答
0 
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);

试试这个

于 2013-03-04T14:58:31.717 回答
0

要使其在页面加载时运行，您需要有一个在页面加载时调用的函数。让我们将其命名为“onStart”。它只包含一行，即您的 setInterval 行。此外，您还必须在 html 代码中编写一些 js。那就是找到你的身体标签并添加属性“onload”。像这样：

<body onload="onStart()">
于 2013-03-04T14:58:43.770 回答