0

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>
0

6 Answers 6

2

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.)

2
  • Works great but how can this be looped so when it gets to img4 it goes back to img1. I tried an if statement but couldn't get it to work. Thanks.
    – usertest
    Jan 4, 2010 at 20:22
  • Oops, I should have mentioned that the i variable has to be initialized outside the function, so that it's not locally scoped and reinitialized each time the function executes. This revised code should work! Jan 4, 2010 at 20:28
2

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);
    });
}
2
  • Thanks, it works but has the same problem as Jeff Sternal's - it doesn't loop. How to go back to img1 after img4. I can't get the if statement to do it.
    – usertest
    Jan 4, 2010 at 20:24
  • if i were you i'd start at 0 so it'd be easier to use modulus. the (i+1)%4 would get you your cycle, so if i = 3, (3+1)%4 = 0. your images would be named img0.jpg, img1.jpg, img2.jpg, img3.jpg
    – John Boker
    Jan 4, 2010 at 20:33
2

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.

0

Take a look at this jQuery slideshow question

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.