全宽滑块 - 交叉淡入淡出转换问题

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; } 

及以下

$(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

如果你只是想跨淡出效果我的JS，那么你应该尽量使用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>