简单的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()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);
        });
    });  
}

应该管用.由于函数(){}之间的代码现在将在淡入淡出完成后执行.