javascript - 全宽 slider - 交叉淡入淡出过渡问题

Question

我有一个全宽横幅，我想将其淡入和淡出成不同的图像。它做了它应该做的事情，但我的问题是在淡入淡出过程中显示的白色背景 - 所以我正在寻找交叉淡入淡出..但不确定如何去做。

我的HTML是这样的

<div id="backgroundimg">
  <div class="row copy limitedwidth extra-pad">
    <h1> Stay somewhere amazing </h1>
    <h1> this summer </h1>
    <p class="lrgfont hidden-xs">From city centre boutique to beach side mill, and arctic cabin to honeymoon suite. Discover our range of unique, friendly and affordable places to stay and you’ll never look at budget accommodation in the same way again! </p>
  </div>
  </div>

我的 CSS 是这样的

   #backgroundimg { background-image: url('/sites/default/files/Pwll_Deri_landing.jpg'); background-repeat: no-repeat; background-position: 50% 66%; border-bottom: 1px solid #AAA6A6; min-height: 295px; }
.image-0 { background-image: url('/sites/default/files/Pwll_Deri_landing.jpg') !important; background-position: 50% 66% !important; }
.image-1 { background-image: url('/sites/default/files/seaside-large.jpg') !important; background-position: 50% 66% !important; }
.image-2 { background-image: url('/sites/default/files/london-large.jpg') !important; background-position: 50% 66% !important; }

下面是我的 JS

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 3;

  $("#backgroundimg").addClass("image-"+step).fadeIn(500);

  setInterval(function(){
    $("#backgroundimg").fadeOut(500,function(){
       $(this).removeClass("image-"+step);
       step = (step > limit) ? 0 : step + 1;
      $("#backgroundimg").addClass("image-"+step).fadeIn(500);
    });
  },seconds);
});

Answer 1

如果你只是想要交叉淡出效果，那么你应该尝试使用css transitions，它们使用起来更方便。下面是简单的gallery 函数，它只是将active 类设置为图像，动画在css 上:

function initGallery(el) {
  var total = $('img', el).length,
    current = 0;

  return function animate(dur) {
    $('img', el).eq(current)
      .addClass('active')
      .siblings()
      .removeClass('active');

    current++;

    if (current == total) {
      current = 0;
    }

    setTimeout(animate, dur || 2000)
  }
}

initGallery('.gallery')(4000);

.gallery {
  width: 300px;  
  position: relative;
}

.gallery img {
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 1s;
}

.gallery img.active {
  opacity: 1;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <img src="//c5.staticflickr.com/8/7619/26712346812_a6f1def27d_b.jpg" alt="">
  <img src="//c5.staticflickr.com/8/7342/26205959324_729113fa7a_h.jpg" alt="">
  <img src="//c6.staticflickr.com/8/7331/26206092373_90604c520b_b.jpg" alt="">
</div>