W3スクール画像スライドショーの順序逆転

Question

w3の学校http://www.w3schools.com/w3css/w3css_slideshow.aspに示されているようにスライドショーを実装しましたが、スライドする順番に問題があります。私は自動スライドショーとスライドショーインジケータを組み合わせましたが、ページをロードすると、順序は3,2,1です。したがって、インジケータは右から左に移動しています。私は自分自身を理解することに喜びはなかったので、誰かが私を助けてくれることを願っています。

<div class="imageContent"> 
        <div class="w3-content w3-display-container" style="max-width:670px"> 
        <a href="mypage.php"><img class="mySlides" src="img/image1.jpg" style="width:100%"></a> 
        <a href="mypage.php"><img class="mySlides" src="img/image2.jpg" style="width:100%"></a> 
        <a href="mypage.php"><img class="mySlides" src="img/image3.jpg" style="width:100%"></a> 
        <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> 
        <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
        <div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> 
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
       </div> 
      </div> 

      <script> 
       var slideIndex = 1; 

       showDivs(slideIndex); 

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

       function currentDiv(n) { 
        showDivs(slideIndex = n); 
       } 

       function showDivs(n) { 
        var i; 

        var x = document.getElementsByClassName("mySlides"); 
        var dots = document.getElementsByClassName("demo"); 
        if (n > x.length) {slideIndex = 1}  
        if (n < 1) {slideIndex = x.length} 
        for (i = 0; i < x.length; i++) { 
         x[i].style.display = "none"; 
        } 
        for (i = 0; i < dots.length; i++) { 
         dots[i].className = dots[i].className.replace(" w3-white", ""); 
        } 
        x[slideIndex-1].style.display = "block"; 
        dots[slideIndex-1].className += " w3-white"; 

       } 

       carousel(); 

       function carousel() { 

       var i; 
       var x = document.getElementsByClassName("mySlides"); 
       for (i = 0; i < x.length; i++) { 
        x[i].style.display = "none"; 
       } 
       slideIndex++; 
       if (slideIndex > x.length) {slideIndex = 1} 
       x[slideIndex-1].style.display = "block"; 
       setTimeout(carousel, 5000); // Change image every 5 seconds 
       plusDivs(1); 
       } 
       </script> 

      </div> 

Answer 1

Iは、（1）showDivs（slideIndex）

carousel(); 

      function carousel() { 

      var i; 
      var x = document.getElementsByClassName("mySlides"); 
      for (i = 0; i < x.length; i++) { 
       x[i].style.display = "none"; 
      } 
      slideIndex++; 
      if (slideIndex > x.length) {slideIndex = 1} 
      x[slideIndex-1].style.display = "block"; 
      setTimeout(carousel, 5000); // Change image every 5 seconds 
      showDivs(slideIndex); 
      } 

でplusDivsを交換するために必要な