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

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

1 个答案: