Простой jquery photo slideshow

Question

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

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

t = setTimeout(slideShow(), 5000); 

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

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

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

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

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

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