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>

全宽滑块 - 交叉淡入淡出过渡问题

1 个答案: