Question

嗨，

我有这段代码可以显示幻灯片，但一次只能显示1张图片。我希望能够显示多个。

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(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";  
}

这是我的html

<div>
  <img class="mySlides" src="img_snowtops.jpg" style="width:30%">
  <img class="mySlides" src="img_lights.jpg" style="width:30%">
  <img class="mySlides" src="img_mountains.jpg" style="width:30%">
  <img class="mySlides" src="img_forest.jpg" style="width:30%">
  <img class="mySlides" src="img_snowtops.jpg" style="width:30%">
  <img class="mySlides" src="img_lights.jpg" style="width:30%">
  <img class="mySlides" src="img_mountains.jpg" style="width:30%">

  <button onclick="plusDivs(-1)">&#10094;</button>
  <button onclick="plusDivs(1)">&#10095;</button>
</div>

我尝试使其显示为3：

function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n > x.length) {slideIndex = 1}
      if (n < 3) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      x[slideIndex-1].style.display = "block";  
    }

在许多其他尝试中，但没有成功，因此我想我的方向不正确。请帮忙吗？

谢谢。

更改幻灯片显示的图片数量

0 个答案: