Javascript幻灯片显示问题同时显示所有图像

Question

我已经完成了一个PHP页面，它带有一个Cicle FOR自动生成一些数据列表。 文字部分是容易的，效果很好，我使用变量“i” PHP FOR创造同一个脚本很多次（方法结束所有的0和1，变量只是<?php $i ?>）

，但我有一个问题JS幻灯片演示，我不是JS的角色。

现在幻灯片不能正常工作，并在同一时间

我已经发布了2个圈子中的我的代码显示所有图像，我做了什么错？

<div class="slideshow-container"> 
         <div class="mySlides0"> 
         <div class="numbertext">1/3</div> 
         <img src="images/logo.jpg" style="width:100%"> 
         <div class="text">Caption Text</div> 
         </div> 

         <div class="mySlides0"> 
         <div class="numbertext">2/3</div> 
         <img src="images/logo.jpg" style="width:100%"> 
         <div class="text">Caption Two</div> 
         </div> 

         <div class="mySlides0"> 
         <div class="numbertext">3/3</div> 
         <img src="images/logo.jpg" style="width:100%"> 
         <div class="text">Caption Three</div> 
         </div> 

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

        <div style="text-align:center"> 
         <span class="dot0" onclick="currentSlide0(1)"></span> 
         <span class="dot0" onclick="currentSlide0(2)"></span> 
         <span class="dot0" onclick="currentSlide0(3)"></span> 
        </div> 

        <script> 

         slideIndex0 = 1; 
         showSlides0(slideIndex0); 


         function plusSlides0(n) { 
          showSlides0(slideIndex0 += n); 
         } 

         function currentSlide0(n) { 
          showSlides0(slideIndex0 = n); 
         } 

         function showSlides0(n) { 
          var i; 
          var slides = document.getElementsByClassName("mySlides0"); 
          var dots = document.getElementsByClassName("dot0"); 
          if (n > slides.length {slideIndex0 = 1} 
          if (n < 1) {slideIndex0 = 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[slideIndex0-1].style.display = "block"; 
          dots[slideIndex0-1].className += " active"; 
         } 

        </script> 




        <div class="slideshow-container"> 
        <div class="mySlides1"> 
        <div class="numbertext">1/3</div> 
        <img src="Golf/20170309_122804.jpg" style="width:100%"> 
        <div class="text">Caption Text</div> 
        </div> 

        <div class="mySlides1"> 
        <div class="numbertext">2/3</div> 
        <img src="Golf/20170309_122759.jpg" style="width:100%"> 
        <div class="text">Caption Two</div> 
        </div> 

        <div class="mySlides1"> 
        <div class="numbertext">3/3</div> 
        <img src="images/logo.jpg" style="width:100%"> 
        <div class="text">Caption Three</div> 
        </div> 

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

       <div style="text-align:center"> 
        <span class="dot1" onclick="currentSlide1(1)"></span> 
        <span class="dot1" onclick="currentSlide1(2)"></span> 
        <span class="dot1" onclick="currentSlide1(3)"></span> 
       </div> 

       <script> 

        slideIndex1 = 1; 
        showSlides1(slideIndex1); 

        function plusSlides1(n) { 
         showSlides1(slideIndex1 += n); 
        } 

        function currentSlide1(n) { 
         showSlides1(slideIndex1 = n); 
        } 

        function showSlides1(n) { 
         var i; 
         var slides = document.getElementsByClassName("mySlides1"); 
         var dots = document.getElementsByClassName("dot1"); 
         if (n > slides.length {slideIndex1 = 1} 
         if (n < 1) {slideIndex1 = 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[slideIndex1-1].style.display = "block"; 
         dots[slideIndex1-1].className += " active"; 
        } 

       </script> 

Answer 1

你的问题是因为你还没有关闭if条件

更换

if (n > slides.length {slideIndex0 = 1} 

通过

if (n > slides.length) {slideIndex0 = 1} 

做工精细

slideIndex0 = 1; 
 
showSlides0(slideIndex0); 
 

 

 
function plusSlides0(n) { 
 
    showSlides0(slideIndex0 += n); 
 
} 
 

 
function currentSlide0(n) { 
 
    showSlides0(slideIndex0 = n); 
 
} 
 

 
function showSlides0(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides0"); 
 
    var dots = document.getElementsByClassName("dot0"); 
 
    if (n > slides.length) {slideIndex0 = 1} 
 
    if (n < 1) {slideIndex0 = 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[slideIndex0-1].style.display = "block"; 
 
    dots[slideIndex0-1].className += " active"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slideshow-container"> 
 
    <div class="mySlides0"> 
 
    <div class="numbertext">1/3</div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/fr/3/37/Ic%C3%B4ne_foobar2000_v1.1.2.png" style="width:100%"> 
 
    <div class="text">Caption Text</div> 
 
    </div> 
 

 
    <div class="mySlides0"> 
 
    <div class="numbertext">2/3</div> 
 
    <img src="https://image.freepik.com/icones-gratuites/bouton-de-telephone-de-symbole_318-41893.jpg" style="width:100%"> 
 
    <div class="text">Caption Two</div> 
 
    </div> 
 

 
    <div class="mySlides0"> 
 
    <div class="numbertext">3/3</div> 
 
    <img src="http://www.icone-png.com/png/39/39057.png" style="width:100%"> 
 
    <div class="text">Caption Three</div> 
 
    </div> 
 

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

 
<div style="text-align:center"> 
 
    <span class="dot0" onclick="currentSlide0(1)"></span> 
 
    <span class="dot0" onclick="currentSlide0(2)"></span> 
 
    <span class="dot0" onclick="currentSlide0(3)"></span> 
 
</div>