1

我下面的滑块似乎无法正常工作。从一张幻灯片转换到另一张幻灯片时出现故障。这是我的代码：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();


  });

});
4

2 回答 2

1

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

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

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

这将使淡入在实际触发前等待 500 毫秒，从而使淡出发生。这是一个显示这一点的小提琴。

于 2016-02-12T05:32:37.120 回答
0

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

解决方案：只需将所有幻灯片包装在父块中，并使用以下样式从顶部定位所有幻灯片。

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

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

于 2016-02-12T05:47:43.557 回答