jquery - 简单的jquery照片幻灯片

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

slideShow() 立即再次执行slideShow() 函数。尝试将其替换为:

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

应该可以工作。由于 function() { } 之间的代码现在将在淡入淡出完成后执行。