Javascript画像スライドショーでページロード時に初期画像が選択されない

Question

私はJavaScriptの初心者だと言って前に説明します。

問題：私はJavaScriptを使用して5画像のスライドショーを持っているが、Webページのロード時に、互いに以下の画像は、ページを下に行くのではなく、互いの重複表示されます。

「左」または「右」のトグル矢印を選択して次の画像に移動すると、画像が正しく重なり合って正しい画像が表示されます。ページを更新するまで、スライドショーは正常に動作します。

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