javascript - jQuery 幻灯片图像转换

Question

我的 jQuery 幻灯片放映有问题，我似乎无法解决。在图像转换期间，幻灯片将闪烁白色，而不是很好地淡入下一张照片。我相信它与以下代码行有关:

$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');

单击上一个和下一个按钮会导致同样的问题。

Here's幻灯片的 jsFiddle。

谢谢!

Answer 1

我已经重构了您的代码并将其发布在这里:

http://jsfiddle.net/salman/nyXUt/44/

主要变化如下:

白色闪光解决方法:您使用的是淡出和淡入。当这两个动画一起启动时，两个图像在某一时刻都变成 50% 透明并且幻灯片看起来发白(或背景发色)。我使用了另一种方法。使用 z-index，我将“隐藏”图像放在“显示”图像前面，然后淡出“隐藏”图像:

#slideshow .current {
    display: block;
    z-index: 1;
}
#slideshow .animate {
    display: block;
    z-index: 2;
}

nextItem.addClass("current");
prevItem.removeClass("current").addClass("animate").fadeOut(animDuration, function () {
    $(this).removeClass("animate").css("display", "");
});

setInterval 与 setTimeout:我使用 setTimeout 而不是 setInterval，这样可以更好地控制时间。当用户使用上一个/下一个按钮打断它们时，将重新安排自动转换。

动画时间:我添加了回调和 .stop()动画以防止重叠动画。