Simple jquery photo slideshow

Question

I wanted to write my own slideshow script, but the end result is that it immediately goes to image 6 and flashes (disappears a lot) ... HTML is just a page with the image id = "ss1".

var i = 1;

$(document).ready(function(){
    slideShow();
});
var t;
function runSlideShow() {
    if(i >= 7) i = 1;
    $("#ss1").fadeTo("slow",0);
    document.getElementById('ss1').src = "img/" + i + ".jpg";
    $("#ss1").fadeTo("slow",1);
    i += 1;
    t = setTimeout(slideShow(), 5000);  
}

Answer 1

I think the problem is that you are using

t = setTimeout(slideShow(), 5000);

slideShow () immidiatly again performs the function slideShow (). Try replacing it:

t = setTimeout('slideShow()', 5000);

instead of this. Keep in mind that this uses eval, which is considered unsafe (not in this case, though) and slow.

Attenuation does not work because fade works asynchronously in your code, which means that it freezes while it disappears at the same time (which makes some strange situations obvious).

function runSlideShow() {
    if(i >= 7) i = 1;
    $("#ss1").fadeTo("slow",0, function() {
        document.getElementById('ss1').src = "img/" + i + ".jpg";
        $("#ss1").fadeTo("slow",1, function() {
            i += 1;
            t = setTimeout('slideShow()', 5000);
        });
    });  
}

. () {} .