jquery galleria dissolvenza

Question

Hay tutto, ho scritto una semplice galleria di dissolvenza con jQuery. E 'fondamentalmente loop anche se una serie di immagini, dissolvenza da uno all'altro. Funziona perfettamente, come previsto, fino a quando si arriva all'ultima immagine, allora non svanisce dall'ultimo al primo, solo per lo visualizza.

ecco la mia 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: c'è sempre e solo sarà 7 immagini

.

E il mio markup

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

Credo che il problema sta nella linea

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

Answer 1

Due cose stanno accadendo quando si raggiunge la fine del 'loop' ed eseguire:

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

In primo luogo, si sta svanendo nel i + 1, che è la seconda immagine, non il primo, perché i ora è 0.

In secondo luogo, si sta dissolvenza i, la prima immagine, che non è nemmeno visibile. Che l'ultima immagine che viene visualizzata è immagine 7, quando era i + 1 6.

Quindi, non si è mai nascosto l'ultima immagine, e non mostra la prima immagine. Una soluzione molto veloce per me è stato quello di rendere il fade out dichiarazione il primo a eseguire (i è ancora 'punta' per l'immagine corrente) e l'impostazione i = -1 invece di 0 quando il 'loop' finisce.

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

Tuttavia, questo sembra interrompere il flusso delle transizioni quando si avvia il ciclo sopra (credo perché le dichiarazioni di dissolvenza sono ora separati dalla logica). Una semplice correzione per che dovrebbe essere facile come l'introduzione di variabili current e next e facendo ogni logica, all'inizio, utilizzando le variabili nelle dichiarazioni di dissolvenza.