JS滑块在褪色时跳跃

Question

我的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 
);

Answer 1

只需将position:absolute放在ul lì。

上

ul li {
  position:absolute
}

JSFIDDLE：http://jsfiddle.net/9L55zh9o/2/。

你拥有它position:static，它将它保存在文档流程中并将其他元素推送到https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values。

Answer 2

fadeOut功能完成后调用fadeIn函数。

http://jsfiddle.net/9L55zh9o/1

function () {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    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');
    });
}, $transition_time + $time_between_slides);

Answer 3

此处更新了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();隐藏所有幻灯片。

Answer 4

因为你的进出同时发生 - 因此淡入淡出会在out元素下创建一个元素。尝试这样的事情：

// 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/2, function(){
     if (slides().length == $i + 1) $i = -1; // loop to start

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


}, $transition_time + $time_between_slides);

fiddle

Answer 5

在这里工作jsfiddle http://jsfiddle.net/bevanr01/705u9w1a/

// 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().hide();

// 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,
                        function() {
    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);

您的转换同时发生，因此转换不顺畅。您还应该最初隐藏元素而不是淡出以防止初始行为。