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

Question

如何使效果更平滑，以便下一个图像逐渐消失，而不仅仅是出现？活动幻灯片将淡出，然后在第一张幻灯片淡出为白色后显示下一张幻灯片。这看起来不太光滑或优雅，我希望褪色/褪色更自然地发生

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/以获取基于代码的完整示例。