4

我的 jQuery 幻灯片有问题，我似乎无法弄清楚。在图像转换过程中，幻灯片会闪烁白色，而不是很好地淡入下一张图片。我相信这与以下代码行有关：

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

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

这是幻灯片的 jsFiddle。

谢谢！

4

6 回答 6

4

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

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 vs setTimeout：我使用 setTimeout 而不是 setInterval，它可以更好地控制时间。当用户使用 prev/next 按钮打断自动转换时，会重新安排自动转换。

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

于 2013-02-16T10:26:40.983 回答
3

您必须在开始淡出当前图像之前显示下一张图像，您还必须同时执行此操作，只需将fadeIn(1000).next() 图像替换为show()，就像这样http://jsfiddle.net/nyXUt /6/

于 2013-02-14T13:23:24.407 回答
2

可能最小化fadeOut(), 和fadeIn()时间或fadeOut(slow)

于 2013-02-07T19:10:00.290 回答
2

当您单击下一个或上一个时，您应该停止间隔和上一个动画，即：

clearInterval(run);
$('#slideshow img').stop();

当下一张图像的淡入完成后，您重新启动间隔，即：

$('#slideshow img:last').fadeIn(1000, function() { run=setInterval("switchSlide()", speed);})

编辑： 如果您在一秒钟内单击开关按钮 10 次。大约 20 个动画将同时运行。

编辑： 如果您在图像切换（自动或其他方式）时单击下一个或上一个并且淡化已经在进行中，淡化将在整个效果的时间跨度内从几乎淡化到完全淡化（所以 1 秒） . 在这个时候，图像将大部分是白色的。

最好更快地设置手动切换的淡出（比如 300 毫秒甚至更少）。这也将改善用户体验。

编辑： 这是小提琴

这是代码：

var speed = 4000;
run = setTimeout("switchSlide()", speed);
$(document).ready(function() {

    $('#caption').html($('#slideshow img:last').attr('title'));

    $('#previous').click(switchBack);
    $('#next').click(switchSlide);

});

function switchSlide() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.first().css({'opacity':0}).appendTo('#slideshow').animate({'opacity':1}, 1000, function() { 
        run = setTimeout("switchSlide()", speed); } );
    $('#caption').html(jq.last().attr('title'));
}

function switchBack() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.last().animate({'opacity':0},1000, function() { 
        $(this).prependTo('#slideshow').css({'opacity':1}); run = setTimeout("switchSlide()", speed);});
    $('#caption').html(jq.get(1).title);
}
于 2013-02-15T15:09:46.260 回答
2

问题是你在淡入的同时淡出。使用标准的缓动函数，中间有一个点，两个图像几乎不可见，并且在图像所在的位置留下一个空白。

为了解决这个问题，我改变了图像的顺序，以便可见图像位于堆栈顶部。现在我们可以将新图像放在当前可见图像的顶部并淡入。一旦新图像完全可见，我们就隐藏以前的图像。这使得过渡更加顺畅。

$('#slideshow img:first').appendTo('#slideshow');
$('#slideshow img:last').fadeIn(1000, 'swing', function() {
    $('#slideshow img:last').prev().hide();
});

这是一个jsfiddle：http: //jsfiddle.net/nyXUt/52/

于 2013-02-15T17:17:51.533 回答
2

您可以尝试使用（仅）适用于 jQuery 动画的延迟功能。

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

但是，如果您使用此处其他评论者所述的提供的回调，这是最好的方法。

于 2013-02-16T11:03:14.097 回答