Question

我为我的网站创建了一个简单的图片幻灯片，但我遇到的问题是，当你第一次访问网站时，它会显示所有图片，直到你点击其中一个滚动箭头进入幻灯片。我希望它在您第一次打开网站时自动只显示一张图片。这是我的代码：

<div class="wrapper">
<h2>Gallery</h2>
<img class="mySlides" src="assets/images/chickens1.jpg">
<img class="mySlides" src="assets/images/goat1.jpg">
<img class="mySlides" src="assets/images/goat4.jpg">
<img class="mySlides" src="assets/images/goat2.jpg">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>

JavaScript的：

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

Answer 1

很难从你发布的内容中分辨出来，但我期望发生的事情是，最初，由于它们的CSS样式，所有4个图像都是可见的。然后，当用户与页面进行交互时，将调用JavaScript，这使得只有1个可见。

您可能尝试的一件事是设置它以使它们全部设置为display:none开始，并在页面加载时调用showDivs(1)。

Html中的幻灯片显示不会自动显示

1 个答案: