jQuery幻灯片图像转换

jQuery Slideshow Image Transition

本文关键字：转换 图像 幻灯片 jQuery      更新时间：2023-09-26

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

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

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

这是幻灯片的jsFiddle。

谢谢！

在开始淡出当前图像之前，您必须显示下一个图像，同时也必须这样做，只需将.next（）图像的fadeIn(1000)替换为show()，如下所示http://jsfiddle.net/nyXUt/6/

我已经重新考虑了您的代码，并将其发布在这里：

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

主要变化如下：

白色闪光灯解决方法：您使用的是淡出和淡入。当两个动画一起启动时，两个图像在某一点上都变为50%透明，幻灯片显示为白色（或背景色）。我使用了另一种方法。使用z索引，我将"要隐藏"的图像放在"要显示"的图像前面，然后淡出"要隐藏的"图像：

#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()，以防止动画重叠。

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

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

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

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

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

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

编辑：如果在图像切换（自动或以其他方式）时单击"下一个"或"上一个"，并且渐变已在进行中，则渐变将在整个效果的时间跨度内（约1秒）从几乎渐变到完全渐变。此时，图像将大部分为白色。

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

编辑：这是小提琴

这是代码：

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);
}

您可以尝试使用延迟函数，该函数（仅）适用于jQuery动画。

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

但最好的方法是，如果你使用这里其他评论者所说的提供的回调。

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

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

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

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

相关文章：