简单的 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() { } 之间的代码现在将在淡入淡出完成后执行。