Galerie fading jquery

Question

Hay, je l'ai écrit d'une simple galerie fading avec jQuery. Il boucles essentiellement si un ensemble d'images, la décoloration de l'un à l'autre. Il fonctionne parfaitement, comme prévu, jusqu'à ce qu'il arrive à la dernière image, il ne se fane pas alors de la dernière à la première, juste à l'affiche.

voici mon jQuery

$(document).ready(function(){

Zindex = 99999;
i = 0;

$(".flash img").each(function(){
    $(this).css({
        'position':'absolute',
        'z-index':Zindex,
        'display':'none'
    });
    Zindex--;
});

$(".flash img:first").show();

doFade = function(){        
    if( i == 6 ) { i = 0; };        
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000);      
    setTimeout("doFade()", 2000);
    i++;
};

doFade();

});

Note: il n'y a que jamais va être 7 images

.

Et mon code

<div class='flash'>
    <img src="img/gallery/picture1.jpg" width="780" height="253" alt="Picture1">
    <img src="img/gallery/picture2.jpg" width="780" height="253" alt="Picture2">
    <img src="img/gallery/picture3.jpg" width="780" height="253" alt="Picture3">
    <img src="img/gallery/picture4.jpg" width="780" height="253" alt="Picture4">
    <img src="img/gallery/picture5.jpg" width="780" height="253" alt="Picture5">
    <img src="img/gallery/picture6.jpg" width="780" height="253" alt="Picture6">
    <img src="img/gallery/picture7.jpg" width="780" height="253" alt="Picture7">
</div> 

Je pense que le problème réside dans la ligne

if( i == 6 ) { i = 0; };

Answer 1

Deux choses se produisent lorsque vous atteignez la fin de la « boucle » et exécutez:

if( i == 6 ) { i = 0; };

Tout d'abord, vous Fading dans i + 1, qui est la deuxième image, pas la première, parce que i est maintenant 0.

En second lieu, vous Fading sur i, la première image, qui est même pas visible. Cette dernière image affichée est l'image 7, lorsque i + 1 était 6.

Vous n'êtes jamais cacher la dernière image, et ne montrant la première image. Une solution très rapide pour moi était de faire la déclaration fondu le premier à execute (i est encore « pointage » à l'image actuelle) et la mise en place de i = -1 0 lorsque la « boucle » se termine.

doFade = function(){
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000); 
    if( i == 6 ) { i = -1; }
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);             
    setTimeout("doFade()", 2000);
    i++;
};

Cependant, cela ne semble interrompre le flux des transitions lors du démarrage de la boucle sur (je suppose parce que les déclarations de fondu sont maintenant séparés par la logique). Une solution simple pour cela devrait être aussi facile que l'introduction de variables current et next et de faire toute logique au début, en utilisant ces variables dans les états de fondu.