Простое слайд-шоу фотографий jquery

Я хотел написать свой собственный сценарий слайд-шоу, но конечный результат-он сразу же переходит к изображению 6 и сильно мигает (исчезает)... HTML - это просто страница с идентификатором изображения= "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 3
jquery slideshow

1 ответ:

Я думаю, проблема в том, что вы используете 

t = setTimeout(slideShow(), 5000);

SlideShow() немедленно выполняет функцию slideShow () снова. Попробуйте заменить его на: 

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

Вместо этого. Имейте в виду, однако, что это использует eval, который считается небезопасным(не в этом случае, хотя) и медленным.

Fade не работает, потому что fade работает асинхронно в вашем коде, что означает, что он исчезает в то время как он исчезает в то же время(что делает некоторые странные ситуации происходят, очевидно). 

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

Должно сработать. Так как код между функцией () {} теперь будет выполняться после завершения fade.

5