jQuery galería de decoloración

Question

Hay de todo, he escrito una galería de decoloración sencillo con jQuery. Básicamente bucles a través de un conjunto de imágenes, la decoloración de una a otra. Funciona perfectamente, como se predijo, hasta que llega a la última imagen, entonces no se desvanece desde el último al primero, sólo para lo muestra.

aquí está mi 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();

});

Nota: sólo hay cada vez va a ser de 7 imágenes

.

Y mi marcado

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

Creo que el problema radica en la línea

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

Answer 1

Dos cosas están sucediendo cuando se llega al final de la 'loop' y ejecutar:

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

En primer lugar, ya está desvaneciendo en i + 1, que es la segunda imagen, no el primero, porque es i ahora a 0.

En segundo lugar, se desvanece fuera i, la primera imagen, que ni siquiera es visible. Esa última imagen que se muestra la imagen era 7, cuando fue i + 1 6.

Por lo que nunca está ocultando la última imagen, y nunca muestra la primera imagen. Una solución muy rápido para mí era hacer el fundido de salida comunicado el primero en ejecutar (i es todavía 'apunta' a la imagen actual) y el establecimiento de i = -1 en lugar de 0 cuando termina el 'bucle'.

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++;
};

Sin embargo, esto parece interrumpir el flujo de las transiciones cuando se inicia el bucle sobre (supongo que porque los estados de desvanecimiento están separados por lógica). Una solución simple para eso debería ser tan fácil como introducir variables current y next y haciendo toda lógica al principio, el uso de estas variables en el estado fundido.