jquery $ ('corps') échange d'image aide

Question

Je le code ci-dessous:

$(document).ready(function() { 
    var bgimages=new Array() 
    bgImages[0]="bg.jpg" 
    bgImages[1]="bg2.jpg" 
    //sloppy preload images 
    var pathToImg=new Array() 
    for (i=0;i<bgImages.length;i++) 
    { 
    pathToImg[i]=new Image() 
    pathToImg[i].src=bgImages[i] 
    } 

    var i = 0; 
    var rotateBg = setInterval(
    function(){ 
    $('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
     i++; 
    }, 9000); 
}); 

Je besoin d'aide résoudre 2 problèmes:

1. Il ne boucle à travers les images une fois, qu'est-ce que Je manque? Je voudrais qu'il se répète indéfiniment.
2. Comment est-ce que je peux fondre les images en fondu?

Answer 1

Vous devez vous assurer de ne pas indexer au-delà de la limite supérieure de votre tableau.

Dans votre cas, un simple XOR bitwise fait le travail:

i ^= 1; 

Si vous aviez plus d'éléments dans votre tableau, une op modulo ferait le travail:

i++; i %= bgImages.length; 

Pour le fondu enchaîné , vous voudrez peut-être envisager CSS transitions. Il y a même un exemple sur la page. Cependant, il s'agit d'un brouillon de travail du W3C, et seuls les navigateurs basés sur Webkit le supportent actuellement. Firefox devrait le supporter avant la fin de l'année. Aucun mot sur si IE le soutiendra et quand. Une bonne chose est que c'est assez simple à créer, pas besoin de JS.

Extrait:

<style type="text/css"> 
div.fader img { -webkit-transition: all 1s ease-in-out; } 
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; } 
div.fader:hover img.swap1, img.swap2 { opacity: 0; } 
</style> 

Answer 2

vous pouvez essayer

function(){ 
i=i<bgImages.length?i:0; 
$('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
     i++; 
    } 
} 

cela réinitialiser à 0 à chaque fois qu'il a atteint la fin du tableau