ansaurus

Question

jQuery slideshow

Answer 1

A:

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.

Russ Cam 2010-01-04 19:59:42

Answer 2

A:

Take a look at this jQuery slideshow question

Nick Knowlson 2010-01-04 19:59:59

Answer 3

+1 A:

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

John Boker 2010-01-04 20:00:06

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 2010-01-04 20:24:03

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 2010-01-04 20:33:45

Answer 4

+2 A:

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

Jeff Sternal 2010-01-04 20:01:17

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 2010-01-04 20:22:25

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!

Jeff Sternal 2010-01-04 20:28:06

Answer 5

A:

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

Addsy 2010-01-04 20:33:08

ansaurus

tags:

views:

answers:

jQuery slideshow

related questions