Unendliche Schleife für 4 Bilder mit jQuery

Question

Ich habe den folgenden Code:

$(document).ready(function () {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
});

Es ist eher ein Spielplatz mit jQuery. Nun, zuerst wollte ich, dass das erste Bild einblendet, dann das zweite und dann das letzte. Danach wollte ich, dass alle Bilder ausgeblendet werden, nachdem sie geladen wurden.

Aber ich denke über zwei neue Probleme nach:

1. ein Endlosschleife erstellen

2. mehr als 3 Bilder verwenden, aber gleichzeitig nur 3 anzeigen (mir ist klar, dass dies die IDs beeinflussen könnte und in etwas anderes geändert werden müsste)

Ideen?

Ich werde hier nicht posten, wie ich versucht habe, die Schleife zu realisieren, nur eine lustige Methode:

$(document).ready(function () {
    function runPics() {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
    } interval = setInterval(runPics, 3500);
});

Dieser Code ist schlecht, oder? :P

Answer 1

Ich würde etwas Ähnliches tun:

$('document').ready(function() {
    var $imgs = $('#slideshow > img'), current = 0;

    var nextImage = function() {
        if (current >= $imgs.length) current = 0;
        $imgs.eq(current++).fadeIn(function() {
            $(this).delay(3000).fadeOut(nextImage);
        })
    };
    nextImage();
});

Fiddle: http://jsfiddle.net/JbrXd/4/

Answer 2

Versuchen:

$(function(){
    var images = ['#imgone', '#imgtwo', '#imgthree'],
         imgIx = 0;

    (function nextImage(){
        $(images[imgIx++] || images[imgIx = 0, imgIx++]).hide().delay(500).fadeIn(1000).delay(1000).fadeOut(500, nextImage);
    })();
});

jsfiddle

---

oder um zufällige Bilder, jeweils 3 zu zeigen:

    one
    two
    three
    four
    five
    six

$(function(){
    var images = ['#imgone', '#imgtwo', '#imgthree', '#imgfour', '#imgfive', '#imgsix'],
        parent = $('#parent');

    (function nextImage(){
        var imgs = images.slice();
        for(var i=0; i<3; i++){
            parent.append(
                $(imgs.splice(0|Math.random() * imgs.length, 1)[0]).hide().delay(1000*i+500).fadeIn(1000).delay(4500-(1000*i)).fadeOut(500, i ? $.noop : nextImage)
            );
        }
    })();
});

jsfiddle

Answer 3

$(document).ready(function () {
    function runPics(){
        $('#imgone').delay(500).fadeIn(1000,function(){
            $('#imgtwo').fadeIn(1000,function(){
                $('#imgthree').fadeIn(1000,function(){
                    $('#imgone').fadeOut(500,function(){
                        $('#imgtwo').fadeOut(500,function(){
                            $('#imgthree').fadeOut(500,function(){
                                runPics();
                            })
                        })
                    })
                })
            })
        })
    };
    runPics();
});

Ich würde es so machen. Ich denke, es macht mehr logischen Sinn, jeden Teil abzuschließen und erst dann zum nächsten Teil überzugehen, anstatt eine Menge Timer von Anfang an zu setzen.

Die Schleife führt die Funktion von innerhalb heraus aus, nachdem alle anderen Dinge beendet sind.

Dieser Code ist ungetestet.

Bearbeitung: In Antwort auf den Kommentar habe ich den Code aktualisiert...

$(document).ready(function () {
    function runPics(){
        $('#imgone').delay(500).fadeIn(1000,function(){
            $('#imgtwo').fadeIn(1000,function(){
                $('#imgthree').fadeIn(1000,function(){
                    $('#imgone').fadeOut(500)
                    $('#imgtwo').fadeOut(500)
                    $('#imgthree').fadeOut(500,function(){
                        $('#imgone').attr({src:'alreadyCachedImage.jpg'})
                        runPics();
                    })
                })
            })
        })
    };
    runPics();
});