白色背景（）

Question

目前我使用這個代碼在我的主頁，創建幻燈片：

var images = [ 
    "/d/assets/images/IT/homepage/slider-1.jpg", 
    "/d/assets/images/IT/homepage/slider-2.jpg", 
    "/d/assets/images/IT/homepage/slider-3.jpg", 
    "/d/assets/images/IT/homepage/slider-4.jpg", 
    "/d/assets/images/IT/homepage/slider-5.jpg", 
]; 

var imageHead = document.getElementById("slider-home"); 
var i = 0; 

setInterval(function() { 
    $('#slider-home').fadeOut(200, 
    function() { 
     imageHead.style.backgroundImage = "url(" + images[i] + ")"; 
     i = i + 1; 
     if (i == images.length) { 
     i = 0; 
     } 
     $('#slider-home').fadeIn(200) 
    } 
    ); 

    }, 5000); 

代碼工作完美，更改背景圖像中，每隔5秒。不幸的是，每一次改變之間都有一個小小的白色背景，過渡似乎並不像Ryanair主頁上的幻燈片那樣「乾淨」和「流暢」：https://www.ryanair.com/it/it/

問題產生的原因在哪裏，我怎麼解決它？

Answer 1

試試這個例子 https://codepen.io/dudleystorey/pen/ehKpi

無需編寫JS了點。 但通過CSS它是可能的。

CSS：

animation: 30s slidy infinite; 

集財產 「的動畫：30歲slidy無限;」 （更改滑塊中圖像的秒數。）

Answer 2

您正在淡出一個圖像，等待該過渡完成，然後淡入下一個圖像。這實際上是轉換到圖像之間的頁面背景。

通過堆疊兩個元素並在它們之間轉換來同時實現這些轉換將有所幫助，但它仍然不完美：在轉換過程中您仍然可以看到背景，而兩個圖像都是部分透明的。

相反，得到的平穩過渡，只是淡出「頂」圖像中的堆棧，揭示其背後的一個：

yourswap = function() { 
 
    if ($('#div1').is(':visible')) { 
 
    fadeout = "#div1"; 
 
    fadein = "#div2"; 
 
    } else { 
 
    fadeout = "#div2"; 
 
    fadein = "#div1"; 
 
    } 
 
    // fade one out, then fade the other in 
 
    $(fadeout).fadeOut(function() { 
 
    $(fadein).fadeIn() 
 
    }); 
 
} 
 

 
badswap = function() { 
 
    $('#div1, #div2').fadeToggle(); // transitions both elements in and out 
 
} 
 

 
goodswap = function() { 
 
    $('#div1').fadeIn(0); // make sure the background element is visible 
 
    $('#div2').fadeToggle(); // transitions the top element in and out 
 
}

.block-div { 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 400px; 
 
    color: #fff; 
 
    font-size: 40px; 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    position: relative 
 
} 
 

 
#div1 { 
 
    background-color: red; 
 
} 
 

 
#div2 { 
 
    background-color: brown; 
 
    display: none; 
 
} 
 

 
#div3 { 
 
    background-color: blue 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<button onclick="yourswap()">Your transition</button> 
 
<button onclick="badswap()">Simultaneous transition</button> 
 
<button onclick="goodswap()">Single transition</button> 
 

 
<div class="container"> 
 
    <div class="block-div" id="div3">(This is the page background)</div> 
 
    <div class="block-div" id="div1">1</div> 
 
    <div class="block-div" id="div2">2</div> 
 
</div>