全宽滑块-交叉渐变过渡问题

Full Width Slider - Cross fade transition issue

本文关键字：渐变 问题      更新时间：2023-09-26

我有一个全宽横幅，我想把它淡入淡出到不同的图像中。它做了它应该做的事情，但我的问题是在渐变过程中显示的白色背景——所以我正在寻找交叉渐变。。但不确定如何进行。

我的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);
});

如果你只是想要交叉淡出效果，那么你应该尝试使用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>

相关文章：