如何正确插入无显示

Question

我不知道会发生什么，我使用以下示例制作幻灯片：

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

它正在工作，但是没有显示的图像未对齐，因为我单击的是下一张图像，所以它有点下降了

第一张幻灯片

最后一张幻灯片

我的代码与示例完全相同

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>

Answer 1

区别在于，最后<img>和</div>之间没有空格。

您的最后一张图片是这样的：

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

但是在w3schools演示中是这样的：

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

因此，在所有其他图像之后都留有空格，这显示为图像与上一个/下一个/下一个按钮之间的空间。