Infinite loop for 4 images with jQuery

I have the next 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);
});

开发者_如何学运维

It's more a playground with jQuery. Well, first I wanted the first image to fade in, then the second one and then the final one. After this I wanted all the images to fade out after they have been loaded.

But I am thinking about two new issues:

1. create an infinite loop

2. use more than 3 images, but at once show only 3 (I realise this could affect the id's to be changed into something else)

Any ideas?

I will not post here how I tried to realise the loop, only one funny method:

$(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);
});

This code sucks, right? :P

---

I would do something like this:

$('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/

---

try:

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

---

or to show random images, 3 at a time:

<div id="parent">
    <div id="imgone"   style="display:none;">one</div>
    <div id="imgtwo"   style="display:none;">two</div>
    <div id="imgthree" style="display:none;">three</div>
    <div id="imgfour"  style="display:none;">four</div>
    <div id="imgfive"  style="display:none;">five</div>
    <div id="imgsix"   style="display:none;">six</div>
</div>

<script>
$(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)
            );
        }
    })();
});
</script>

jsfiddle

---

$(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();
});

I would do it like this. I think it makes more logical sense to complete each part, then after it is done move onto the next bit rather than setting a load of timers from the beginning.

The loop just runs the function from within itself after all the other things have finished.

This code is untested.

Edit: In response to comment, I updated the code...

$(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();
});