このJavaScriptスライドショーにトランジション/アニメーションを追加しますか？

Question

私は、W3Schoolsのチュートリアルに従って、簡単なJavaScriptスライドショーを作成しようとしています。スライドクラスにアニメーションを追加するにはどうすればいいですか？アイデアは次の/前のボタンを押して、2つのスライドのクロスフェード、または最良の場合のシナリオはそれに応じて左右に移動します。

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("slide"); 
 
    if (n > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    if (n < 1) { 
 
    slideIndex = x.length 
 
    }; 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
}

#sl1 { 
 
    background-color: #F00; 
 
} 
 

 
#sl2 { 
 
    background-color: #0F0; 
 
} 
 

 
.slide { 
 
    width: 600px; 
 
    height: 200px; 
 
} 
 

 
#next{ 
 
    background-color: #000; 
 
    color: #FFF; 
 
    width: 65px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
} 
 

 
#prev { 
 
    background-color: #000; 
 
    color: #FFF; 
 
    width: 75px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
}

<div id="prev" onclick="plusDivs(-1);fade();">Previous</div> 
 
<div id="next" onclick="plusDivs(+1)">Next</div> 
 
<div class="slide" id="sl1"></div> 
 
<div class="slide" id="sl2"></div>

Answer 1

代わり表示の不透明上の変更を行うとCSS tansitionを追加することができます。あなたはこのようにCSSを調整することもしています

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("slide"); 
 
    if (n > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    if (n < 1) { 
 
    slideIndex = x.length 
 
    }; 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.opacity = 0; 
 
    } 
 
    x[slideIndex - 1].style.opacity = 1; 
 
}

.container { 
 
position:relative; 
 
margin:20px; 
 
height:200px; 
 
} 
 

 
#sl1 { 
 
    background-color: #F00; 
 
    position:absolute; 
 
} 
 

 
#sl2 { 
 
    background-color: #0F0; 
 
    position:absolute; 
 
} 
 

 
.slide { 
 
    width: 100%; 
 
    height: 200px; 
 
    transition:1s; 
 
} 
 

 
#next{ 
 
    background-color: #000; 
 
    color: #FFF; 
 
    width: 65px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    z-index:9; 
 
} 
 

 
#prev { 
 
    background-color: #000; 
 
    color: #FFF; 
 
    width: 75px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    z-index:9; 
 
}

<div class="container"> 
 
<div id="prev" onclick="plusDivs(-1);">Previous</div> 
 
<div id="next" onclick="plusDivs(+1)">Next</div> 
 
<div class="slide" id="sl1" style="opacity:1"></div> 
 
<div class="slide" id="sl2"></div> 
 
</div>