フェードアウト（中ホワイトバックグラウンド）とフェードイン（）

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：

animation: 30s slidy infinite; 

セットのプロパティ "のアニメーション：30代slidy無限;" （スライダ内の画像を変更する秒数）

Answer 2

画像がフェードアウトして、その遷移が完了するのを待ってから次の画像がフェードアウトします。画像間のページ背景に効果的に移行しています。

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>