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（）immidiatly再次执行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);
        });
    });  
}

应该有效。由于函数（）{}之间的代码现在将在淡入淡出完成后执行。

简单的jquery照片幻灯片

1 个答案: