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>