javascript - JS滑块在褪色时跳来跳去

我的js滑块有个问题，按行为来说是奇怪的。我在标题顶部调用Jquery。 JS脚本位于底部。

页面加载时出现的问题显示了所有三张幻灯片，并迅速显示了第一张幻灯片并隐藏了另外两张幻灯片。当他们淡入和淡出到下一张幻灯片等内容时，内容会跳下来。

您可以在此处查看行为：Demo

这是JS

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 3000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides
);

最佳答案

这里是更新的jsfiddle：http://jsfiddle.net/9L55zh9o/5/

fadeout需要时间，因此您必须在回调函数中延迟fadein：

slides().eq($i).fadeOut($transition_time, function() {
    if (slides().length == $i + 1) $i = -1; // loop to start
    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');
});

您还可以在启动时使用slides().hide();隐藏所有幻灯片。

关于javascript - JS滑块在褪色时跳来跳去，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25975034/