2013-03-04 92 views
0

我試圖讓這個函數在加載頁面時運行,以便圖像在一段時間內會發生變化。我能得到這個圖像的onclick運行,但它在加載運行它不能找到一種方法,我已經試過所有我能找到嘗試做在頁面加載和隨時間變化的javascript隨機圖像

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

回答

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的正確用法here

如果您的腳本在加載imgDisplay之前執行,那麼您可能也會遇到問題。您可以在關閉body標記之前通過放置上面的腳本來解決該問題。

0

如何:

<body onload="setInterval(randomImg, 1000);"> 
... 
</body> 
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); 

嘗試,因爲這

0

爲了使頁面加載運行,你需要有一個將在頁面加載時調用的函數。讓我們把它命名爲「onStart」。它只包含一行,即setInterval行。你也必須在html代碼中寫一些js。這是找到你的身體標記並添加屬性「onload」。就像這樣:

<body onload="onStart()"> 
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/