JSスクリプトにフェード機能を追加しますか？

私はこの3つの画像を交互に切り替える基本的なスクリプトを用意しています。シンプルなフェードイン/フェードアウト/フェードトなどを追加したいと思います。どうすればこれを達成できますか？それとも良い方法がありますか？JSスクリプトにフェード機能を追加しますか？

function displayNextImage() { 
    x = (x === images.length - 1) ? 0 : x + 1; 
    document.getElementById("img").src = images[x]; 
    } 
function displayPreviousImage() { 
    x = (x <= 0) ? images.length - 1 : x - 1; 
    document.getElementById("img").src = images[x]; 
    } 
function startTimer() { 
    setInterval(displayNextImage, 3000); 
    } 
    var images = [], x = -1; 
    images[0] = "assets/img/logo1.png"; 
    images[1] = "assets/img/logo2.png"; 
    images[2] = "assets/img/logo3.png";

出典

2017-08-23 ozmo

http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/ – Jalil

またはjquery：https://www.w3schools.com/jquery/jquery_fade.asp –

チェックアウトの場合：

img { 
    opacity: 1; 
    transition: opacity 500ms ease-in-out; 
} 
img.fadeOut { 
    opacity: 0; 
}

注：

function displayNextImage() { 
    x = (x === images.length - 1) ? 0 : x + 1; 
    var imgvar = document.getElementById("img"); 
    imgvar.classList.add("fadeOut"); 
    setTimeout(function() { 
     imgvar.src = images[x]; 
     imgvar.classList.remove("fadeOut"); 
    }, 500); 
} 
function displayPreviousImage() { 
    x = (x <= 0) ? images.length - 1 : x - 1; 
    var imgvar = document.getElementById("img"); 
    imgvar.classList.add("fadeOut"); 
    setTimeout(function() { 
     imgvar.src = images[x]; 
     imgvar.classList.remove("fadeOut"); 
    }, 500); 
} 
function startTimer() { 
    setInterval(displayNextImage, 3000); 
} 
    var images = [], x = -1; 
    images[0] = "assets/img/logo1.png"; 
    images[1] = "assets/img/logo2.png"; 
    images[2] = "assets/img/logo3.png";

そしてCSSで

：アニメーションが表示されないように思われるので、JavaScriptから500msのtimeOutを追加しました。なぜなら、即座に可視から不可視に戻ってしまうからです。

出典

2017-08-23 08:29:16

を使用できます。完璧。 jonas-giuroありがとうございました。 – ozmo