白色背景（）

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>