Javascript - Plein écran Image Code

Question

http://jsfiddle.net/MAaVV/

est supérieure à la jsFiddle pour mon code. C'est un peu de CSS pour faire une image en plein écran, puis un simple changement de src pour l'image. Je veux changer les fonds d'image toutes les 5 secondes. C'est également ci-dessous:

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

Quelqu'un sait pourquoi cela ne fonctionne pas?

Les points bonus pour la création d'une redirection (vers un autre site Web) après la dernière image du diaporama sont affichés pendant 5 secondes.

Answer 1

Essayez ceci:

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

Fiddle: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

Votre code échoue pour deux raisons:

1. Vous définissez les trois (ou deux dans le cas des délais d'attente jsFiddle) pour s'exécuter en même temps. Votre code les définit tous les trois pour qu'ils s'exécutent 5 secondes après l'appel, mais tous les appels sont effectués en même temps, de sorte qu'ils s'exécuteront tous 5 secondes plus tard.
2. Vous utilisez la variable x dans votre fonction de délai, mais elle n'est pas définie dans la portée de cette fonction. Donc, dans tous les cas, l'image devient 'indéfinie' comme src.

Pour résoudre ce problème, j'utiliser quelque chose comme ceci:

<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/

EDIT: Pour la fonction faire quelque chose après toutes les diapositives ont montré, vous pouvez essayer quelque chose comme ceci:

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