Question

I'm trying to create my own slideshow. The following code fades from one image to another. I'd like to cycle from img1.jpg to img4.jpg but i'm not sure how to pause after each change.

                i++;
                temp = "img"+i+".jpg";
                $("#img").fadeOut(function() {
                    $(this).load(function() { $(this).fadeIn(); });
                    $(this).attr("src", temp);
                });

UPDATE: I've changed the code to the following. On John Boker's advice i've renamed the images to img0, img1, img2, img3. It goes to the first, second, third image the just stops. Any ideas?

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>

            $(document).ready(function(){           
                var temp="";

                function slideshow(i)
                {
                    temp = "img"+i+".jpg";
                    $("#img").fadeOut(function() {
                         $(this).load(function() {
                                    $(this).fadeIn();
                                    // set a timeout of 5 seconds to show the next image;
                                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
                         });
                         $(this).attr("src", temp);
                    });
                }

                slideshow(0);


            });

        </script>
    </head>
    <body>
        <img src="img1.jpg" id="img"/>
    </body>
</html>
Was it helpful?

Solution

You can do it like this, using setInterval:

$(function() {

    var i = 0;

    // Four-second interval
    setInterval(function() {
        $("#img").fadeOut(function() {
            $(this).attr("src", "img" + i++ % 4 + ".jpg");
            $(this).fadeIn();
        });
    }, 4000);
}

I've simplified a few things that might have been causing some of the other problems you're seing, removing the (seemingly superfluous) call to load inside your fadeOut callback and eliminating the unnecessary temp variable.

(Finally, if you aren't just doing this to learn, consider using one of the many excellent slideshow plugins out there, like Cycle.)

OTHER TIPS

you probably should have that inside a function:

// show image i
function slideshow(i)
{
    temp = "img"+i+".jpg";
    $("#img").fadeOut(function() {
         $(this).load(function() {
                    $(this).fadeIn();
                    // set a timeout of 5 seconds to show the next image;
                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
         });
         $(this).attr("src", temp);
    });
}

check out this example...

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
});

A fiddle

simply change the 4000 to 8000 in the script if you want to pause on each image for 8 seconds instead of 4 seconds.

Take a look at this jQuery slideshow question

set up window.setInterval(function, delay) to call a function at a set interval to execute the code that you have.

There are plenty of plugins that will already cycle images for you (unless the challenge is to write your own), one of my particular favourites is the cycle plugin.

One trick is use an animate a property of an element to its current value using a timer.

Eg

$("#img").fadeIn().show(3000).fadeOut();

Because $(this) is already visible, adding the .show(3000) means that element stays visible for 3s before fading out

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top