Javascript圖像幻燈片不會選擇頁面加載時的初始圖像

Question

我會說我是一個javascript新手。

的問題：我使用的JavaScript，在加載網頁，顯示如下彼此下去的頁面，而不是彼此重疊的圖像有5圖像幻燈片。

只要我選擇「左」或「右」切換箭頭移動到下一張圖像，圖像就會正確重疊，並顯示正確的圖像。直到我刷新頁面，幻燈片才能正常工作。

的HTML，CSS和Java如下：

HTML：

<div class="image_slider"> 
    <div class="slideshow-container"> 
     <div class="mySlides fade"> 
      <img src="slider_3.png" style="width:100%"> 
     </div> 

     <div class="mySlides fade"> 
      <img src="slider_2.png" style="width:100%"> 
     </div> 

     <div class="mySlides fade"> 
     <img src="slider_1.png" style="width:100%"> 
     </div> 

     <div class="mySlides fade"> 
     <img src="slider_4.png" style="width:100%"> 
     </div> 

     <div class="mySlides fade"> 
     <img src="slider_5.png" style="width:100%"> 
     </div> 

     <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
     <a class="next" onclick="plusSlides(1)">&#10095;</a> 
    </div> 

    <br> 

    <div style="text-align:center"> 
     <span class="dot" onclick="currentSlide(1)"></span> 
     <span class="dot" onclick="currentSlide(2)"></span> 
     <span class="dot" onclick="currentSlide(3)"></span> 
     <span class="dot" onclick="currentSlide(4)"></span> 
     <span class="dot" onclick="currentSlide(5)"></span> 
    </div> 
    </div> 

CSS：

/* Slideshow container */ 
    .slideshow-container { 
     max-width: 960px; 
     position: relative; 
     margin: auto; 
    } 

    /* Next & previous buttons */ 
    .prev, .next { 
     cursor: pointer; 
     position: absolute; 
     top: 0; 
     top: 50%; 
     width: auto; 
     margin-top: -22px; 
     padding: 16px; 
     color: white; 
     font-weight: bold; 
     font-size: 18px; 
     transition: 0.6s ease; 
     border-radius: 0 3px 3px 0; 
    } 

    /* Position the "next button" to the right */ 
    .next { 
     right: 0; 
     border-radius: 3px 0 0 3px; 
    } 

    /* On hover, add a black background color with a little bit see-through */ 
    .prev:hover, .next:hover { 
     background-color: rgba(254,213,221,0.6); 
    } 

    /* The dots/bullets/indicators */ 
    .dot { 
     cursor:pointer; 
     height: 13px; 
     width: 13px; 
     margin: 0 2px; 
     background-color: #fed5dd; 
     border-radius: 50%; 
     display: inline-block; 
     transition: background-color 0.6s ease; 
    } 

    .active, .dot:hover { 
     background-color: #fca1a2; 
    } 

    /* Fading animation */ 
    .fade { 
     -webkit-animation-name: fade; 
     -webkit-animation-duration: 1.5s; 
     animation-name: fade; 
     animation-duration: 1.5s; 
    } 

    @-webkit-keyframes fade { 
     from {opacity: .4} 
     to {opacity: 1} 
    } 

    @keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
    } 

...和Java：

 window.onload = function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

window.onload = function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

window.onload = function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 

    var slideIndex = 1; 
    showSlides(slideIndex); 
} 

感謝您的幫助。如果我可以提供進一步的信息，我可以。

Answer 1

編輯：我的語法在onload函數上是錯誤的。我剛剛更新了答案。乍一看，你似乎在調用一個還不存在的函數，只是移動showSlides（slideIndex）;到文件的末尾。記住JS一次執行幾乎全部，一個好的做法是先將你的函數放在JS文件中:)

讓我們知道這是否沒有幫助。

編輯：（沒有意識到你可以編輯答案哈哈）

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 

} 

var slideIndex = 1; 

window.onload = function(e){ 
    showSlides(slideIndex); 
};