Javascript全屏幕圖像代碼

Question

http://jsfiddle.net/MAaVV/

上面是我的代碼的JSFiddle。這是一些CSS來製作全屏圖像，然後對圖像進行簡單的src更改。我想每5秒更換一次圖像背景。它也在下面：

<STYLE type=text/css> 
#bg { 
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 
#bg img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
} 
</style> 

<script type="text/javascript"> 

for(var x = 0; x < 2; x++) 
{ 
    setTimeout(function() 
    { 
     var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"]; 
     document.getElementById("img").src = imgs[x]; 
    },5000); 
} 
</script> 

<div id="bg"> 
    <img id="img" src="http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg?w=919&h=613" alt="" /> 
</div> 

任何人都知道爲什麼它不工作？

在幻燈片的最後一張圖片顯示5秒鐘後，用於重定向（到另一個網站）的建築獎勵積分。

Answer 1

試試這個：

var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg", "http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg"]; 
var i=0; 
setInterval(function() {   
    document.getElementById("img").src = imgs[i]; 
    if(i==1) 
    { 
     //alert('test'); 
     $("#img").click(function(){ 
      alert('on'); 
      location.href='http://www.google.com'; 
     }); 
    } 
    if(i++>=1) i=0; 
}, 5000); 

小提琴：http://jsfiddle.net/MAaVV/6/

Answer 2

var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg", "http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg"]; 

var currentImage = 1; 

$(document).ready(function(){ 
    setInterval(function(){ 
     if (currentImage >= imgs.length) 
     { 
      currentImage = 0; 
      window.location.href = 'http://www.google.com'; 
     } 
     else 
     { 
      currentImage++; 
     } 

     $("#bg #img").attr("src", imgs[currentImage]); 
    }, 5000); 
}); 

http://jsfiddle.net/MAaVV/2/

Answer 3

你的代碼失敗的原因有兩個：

1. 您將所有三個（或jsFiddle中的兩個）超時設置爲同時運行。你的代碼將所有的三個設置爲在通話後5秒運行，但所有的呼叫都是同時進行的，所以它們都會在5秒後運行。
2. 在超時函數中使用x變量，但未在該函數的作用域中定義該變量。所以，在所有情況下，圖像越來越'未定義'作爲src。

爲了解決這個問題，我會使用這樣的：

<script type="text/javascript"> 
var imageIndex = 0; 
var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"]; 


setInterval(function(){ 
    document.getElementById("img").src = imgs[imageIndex++]; 
    if(imageIndex >= imgs.length) imageIndex = 0; 
    },5000); 
</script> 

http://jsfiddle.net/MAaVV/5/

編輯：爲了讓所有的幻燈片後的功能做一些事情表明，你可以嘗試像這個：

<script type="text/javascript"> 
var imageIndex = 0; 
var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"]; 

var interval = setInterval(function(){ 
    document.getElementById("img").src = imgs[imageIndex++]; 
    if(imageIndex >= imgs.length){ 
     clearInterval(interval); 
     setTimeout(function(){ 
      // do whatever you want here, after a 5 second pause 
     },5000); 
},5000); 
</script>