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

您需要.Slide元素默认为隐藏，您可以设置最多的CSS：

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