jQuery幻灯片图像转换
我的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-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，它可以更好地控制时间。 当用户使用上一个/下一个按钮中断它们时，将重新安排自动转换。
动画计时 ：我为动画添加了回调和.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); }
您可以尝试使用延迟function，该function仅适用于jQuery动画。
$('#slideshow img:first').fadeOut(1000).next().delay(1000).fadeIn(1000).end().appendTo('#slideshow');
但是，如果您使用其他评论者在此处提供的回调，则最好的方法。
问题是你在渐渐消失的同时淡出。使用标准的缓动function，中间有一个点，两个图像几乎看不见，图像所在的位置留有空白区域。
为了解决这个问题，我已经切换了图像的顺序，以便可见图像位于堆栈顶部。 现在我们可以将新图像放在当前可见图像的顶部并将其淡入。一旦新图像完全可见，我们就会隐藏上一张图像。 这样可以实现更平滑的过渡。
$('#slideshow img:first').appendTo('#slideshow'); $('#slideshow img:last').fadeIn(1000, 'swing', function() { $('#slideshow img:last').prev().hide(); });
这是一个jsfiddle： http ： //jsfiddle.net/nyXUt/52/