代码之家  ›  专栏  ›  技术社区  ›  Gislef

如何正确显示“无”

  •  0
  • Gislef  · 技术社区  · 7 年前

    https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots

    它正在工作,但是没有显示的图像没有对齐,因为我单击下一个图像时,它会向下一点

    第一张幻灯片

    enter image description here

    最后一张幻灯片

    enter image description here

    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");
      if (n > x.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = x.length
      }
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      x[slideIndex - 1].style.display = "block";      
    }
    .mySlides {
      display: none
    }
    <div class="w3-content" style="max-width: 800px;">
      <img class="mySlides" src="1.png" style="width: 100%;" />
      <img class="mySlides" src="2.png" style="width: 100%;" />
      <img class="mySlides" src="3.png" style="width: 100%;" />
      <img class="mySlides" src="4.png" style="width: 100%;" />
      <img class="mySlides" src="5.png" style="width: 100%;" />
      <img class="mySlides" src="6.png" style="width: 100%;" />
      <img class="mySlides" src="7.png" style="width: 100%;" /></div>
    <div class="w3-center">
      <div class="w3-section">
        <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Anterior</button>
        <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Próximo❯</button></div>
    </div>
    1 回复  |  直到 7 年前
        1
  •  1
  •   Barmar    7 年前

    <img> 和 </div> .

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

      <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
    </div>
    

    因此,所有其他图像后面都有空白,这显示为图像和上一个/下一个按钮之间的空间。