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

Question

我已经完成了一个 PHP 页面，该页面使用 cicle FOR 自动生成一些数据列表。 文本部分很简单，效果很好，我使用 PHP FOR 的变量“i”多次创建相同的脚本（方法和变量末尾的所有 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>