すべての画像を表示するJavaScriptスライドショー

Question

マイスライドショーでは、次のまたは前のボタンをクリックしてからスライドショーが正常に機能するまで、すべての画像を一度に連続して表示します。私は似たスレッドを見つけたので、問題は構文エラーに終わった。私は何度もコードを読んだので、問題は見えません。私が間違っていることを教えてください。ありがとうございました！

.ssbutton{ 
     border:none; 
     display:inline-block; 
     outline:0; 
     padding:8px 16px; 
     vertical-align:middle; 
     overflow:hidden; 
     text-decoration:none; 
     color:inherit; 
     background-color:inherit; 
     text-align:center; 
     cursor:pointer; 
     white-space:nowrap 
    } 



    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"; 
    } 





<div class="slideShow"> 
    <img class="Slide" src="images/Pic1.png"> 
    <img class="Slide" src="images/Pic2.png"> 
    <img class="Slide" src="images/Pic3.png"> 
    <img class="Slide" src="images/Pic4.png"> 
     <button class="ssbutton" onclick="plusDivs(-1)">&#10094;Prev</button> 
     <button class="ssbutton" onclick="plusDivs(1)">Next &#10095;</button> 
</div> 

Answer 1

あなたは、あなたがCSSでそれを設定することができ、デフォルトでは非表示に.Slide要素を必要とする：

.Slide { 
    display: none; 
} 
/* show first slide by default */ 
.Slide:first-child { 
    display: block; 
}