在滑块内，活动幻灯片淡出，但下一张幻灯片不会淡入；它只是出现。

Question

如何使效果更平滑，以便下一张图像淡入而不是仅仅出现？当前幻灯片淡出，然后在第一张幻灯片变为白色后出现下一张幻灯片。这看起来不是很流畅或优雅，我希望 fadein/out 更自然地发生

HTML是：

<div id="jumbotron"> 
 <div class="slider">

    <img class="img" src="http://photos.travellerspoint.com/203325/Peru_239.jpg" width="100%">

    <img class="img" src="https://kojin.files.wordpress.com/2008/11/sm-08-3281-white-alpaca-pond-white-peaks.jpg" width="100%">
    <img class="img"src="http://cdn.c.photoshelter.com/img-get/I0000aT96V0jJZX4/s/650/650/Alpaca-Wool-Factory-El-Alto-Bolivia-17.jpg" width="100%"> 

    <img class="img"src="https://kitaliana.files.wordpress.com/2011/09/rug_cusco1.jpg" width="100%">

</div>
</div>

而 JQuery 代码是：

$(document).ready(function() {
  var $slider = $('.slider'); 
  var $slide = 'img';
  var $transition_time = 2000;
  var $time_between_slides = 4000; 

  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

你的问题实际上是你的图像没有堆叠在一起。当新图像淡入时，它会在当前图像下方（y 轴，而不是 z 轴）淡入，当您从 DOM 中删除旧图像时，新图像会跳到它的位置，使其出现好像它没有淡入。

添加以下内容 CSS 以确保所有图像都在相同的坐标上，即彼此正确堆叠

.slider { position:relative;}
.slider > .img { position:absolute;}

http://jsfiddle.net/d62v6fq9/1/ 获取基于您的代码的完整示例。

在滑块内，活动幻灯片淡出，但下一张幻灯片不会淡入；它只是出现。

Within a slider, the active slide fades out, but the next slide doesn't fade in; it just appears.

jquery

slider

fadeout

fadein

carousel