Question

在我的HTML / PHP中，我有一个遍历数据库查询的PHP循环，该查询获取我的图像（当前大约30张），并在容器内进行设置，并带有箭头/按钮以移至下一个或上一个

<div class="w3-content w3-display-container">
      <?php foreach ($imageResult as $im): ?>
        <?php if($im['type'] == 'content'){?>

          <img class="mySlides" src="<?php echo $im['url']; ?>" style="max-width:200px; max-height:200px;">

      <?php } ?>
    <?php endforeach?>
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>

然后我有一个非常基本的javascript，它可以设置第一个图像的舞台并控制箭头功能

<script>
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";  
}
</script>

我的问题是我想这样做，以便我可以设置许多图像，而不是1张图像，或者它可以显示容器中容纳的200x200 iamg中的许多。现在，该容器相当大，但仅显示一个小图像。

我真的很想默认默认显示10个缩略图，然后再从那里延迟加载。我该怎么办？

Answer 1

我将设置一个css规则以使图像保持隐藏，然后使用showDiv：切换隐藏图像的类或将display属性设置为block（或任何可见的显示）

var slideIndex = 0;

function plusDivs(n) {
  // will always start from the slide index
  showDivs(slideIndex, slideIndex + n);
}

// Displaying divs from index i to n(excluding)
function showDivs(i, n) {
  
  i = i < 0 ? 0 : i;

  var x = document.getElementsByClassName("mySlides");
  
  for (; i < x.length && i < n; i++) {
    x[i].style.display = 'block';
  }
  // set the slide index
  slideIndex = i;
}

plusDivs(3);
plusDivs(1);

.mySlides {
  display: none;
}

<img src="https://www.w3schools.com/tags/smiley.gif"
class="mySlides"
alt="Smiley face" width="42" height="42">
<img src="https://www.w3schools.com/tags/smiley.gif" 
class="mySlides"
alt="Smiley face" width="42" height="42">
<img src="https://www.w3schools.com/tags/smiley.gif" 
class="mySlides"
alt="Smiley face" width="42" height="42">
<img src="https://www.w3schools.com/tags/smiley.gif" 
class="mySlides"
alt="Smiley face" width="42" height="42">
<img src="https://www.w3schools.com/tags/smiley.gif" 
class="mySlides"
alt="Smiley face" width="42" height="42">
<img src="https://www.w3schools.com/tags/smiley.gif" 
class="mySlides"
alt="Smiley face" width="42" height="42">
<img src="https://www.w3schools.com/tags/smiley.gif" 
class="mySlides"
alt="Smiley face" width="42" height="42">

JS幻灯片，一开始显示多张图片，而不是1张

1 个答案: