Geek asks and answers

Infinite loop for 4 images using jQuery

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

This is more of a playground with jQuery. Well, at first I wanted the first image to fade, then the second, and then the last. After that, I wanted all the images to disappear after they were downloaded.

But I think of two new problems:

  • create an endless loop

  • use more than three images, but immediately show only 3 (I understand this can affect the identifier, which needs to be changed to something else)

Any ideas?

I will not post here how I tried to implement a 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

+3
source share
3 answers

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

+5
source

- :

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

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

. , , , .

The loop just starts the function from the inside, after all the others have ended.

This code has not been verified.

Edit: In response to the 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();
});
+2
source

More articles:


All Articles