jquery Verblassen Galerie

Question

Hay alle, habe ich schrieb eine einfache Verblassen Galerie mit jQuery. Es Schleifen im Grunde obwohl eine Reihe von Bildern, von einem zum anderen verblassen. Es funktioniert perfekt, wie vorhergesagt, bis es zum letzten Bild bekommt, ist es dann nicht aus dem letzten es mit dem ersten, nur um Displays nicht verblassen.

hier ist meine 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();

});

Hinweis: es gibt immer nur 7 Bilder sein werden

.

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

Ich denke, das Problem liegt in der Zeile

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

Answer 1

Zwei Dinge passieren, wenn Sie das Ende des ‚Loop‘ erreichen und ausführen:

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

Zuerst sind Sie in i + 1 Fading, die das zweite Bild ist nicht die erste, weil i ist jetzt 0.

Zweitens Sie Ausblendung i, das erste Bild, das nicht einmal sichtbar ist. Das letzte Bild angezeigt wird, war Bild 7, wenn i + 1 betrug 6.

Sie sind also nie das letzte Bild versteckt, und nie das erste Bild zeigen. Eine wirklich schnelle Lösung für mich war die Fade-out-Anweisung der ersten (i noch auf das aktuelle Bild ‚zeigt‘ ist) ausführen zu machen und Einstellung i = -1 statt 0 wenn die ‚Schleife‘ endet.

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

Dies ist jedoch scheint die Strömung der Übergänge zu unterbrechen, wenn die Schleife über Start (ich schätze, weil die Fade-Anweisungen jetzt von der Logik getrennt sind). Eine einfache Lösung für das sollte so einfach sein wie current und next Variablen einzuführen und alle Logik am Anfang zu tun, diese Variablen in den Fade-Anweisungen.