Полная ширина ползунок-крест исчезают проблема перехода

У меня есть баннер полной ширины, который я хотел бы исчезать и исчезать в различных изображениях. Он делает то, что он должен делать, но моя проблема — белый фон, который отображается во время затухания, поэтому я ищу перекрестное затухание.. но не уверен, как это сделать.

Мой 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);
});

1 ответ

  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>