Simple jquery photo slideshow

问题

I wanted to write my own slideshow script but the end result is it immediately jumps to image 6 and flashes (fades) violently... The HTML is just a page with an 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);  
}

回答1:

I think the problem is that you use

t = setTimeout(slideShow(), 5000);

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

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

instead. Be aware though that this uses eval, which is considered unsafe(not in this case though) and slow.

The fade isn't working because fade runs asynchronous in your code, meaning that it is fading in while it's fading out at the same time(which makes some weird situations happen obviously).

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

should work. Since the code between the function() { } now will execute once the fade has finished.

来源：https://stackoverflow.com/questions/5010883/simple-jquery-photo-slideshow