Question

我的下方滑块似乎无法正常工作。从一张幻灯片转换到另一张幻灯片时出现故障。这是我的代码：https://jsfiddle.net/tiffsaw/6y5Ltvev/

任何帮助都将非常感激。非常感谢你！

$(document).ready(function(){
$('.slides').first().addClass('active');
$('.slides').hide();    
$('.active').show();

$('.right').click(function(){
$('.active').removeClass('active').addClass('oldActive');    
               if ( $('.oldActive').is(':last-child')) {
    $('.slides').first().addClass('active');
    }
    else{
    $('.oldActive').next().addClass('active');
    }
$('.oldActive').removeClass('oldActive');
$('.slides').fadeOut();
$('.active').fadeIn();


  });

});

Answer 1

这种情况正在发生，因为$('.slides').fadeOut();和$('.active').fadeIn();同时发生。在其中一个幻灯片完全淡出之前，另一个将中断淡出然后淡入。

我通过简单地为淡出添加延迟来修复它，如下所示：

$('.active').delay(500).fadeIn();

这将使淡入淡出在实际触发之前等待500毫秒，从而允许淡出发生。这是fiddle，显示了这一点。

Answer 2

问题是你的幻灯片块。第一次幻灯片时fadeOut（显示：无）。底部幻灯片出现，在淡出动画期间显示小故障（空白区域）。

解决方案：只需将所有幻灯片包装在父块中，然后使用下面的样式从顶部放置所有幻灯片。

.sliderContainer { position: relative;} /*parent container*/
.slides { position: absolute; top: 0; left: 0;} /*postion all slides to top*/

我已经更新了你的小提琴。 jsFiddle

JQuery滑块故障 - 跳跃

2 个答案: