javascript - 如何使用javascript在一个页面上制作多个幻灯片

Question

W3Schools 很棒 javascript slideshow带有我想用于我的元素的褪色和优雅的 css，并且作为单个幻灯片放映效果很好。有人可以告诉我如何修改此脚本以允许在一页上独立运行的多个幻灯片吗？

Answer 1

您只需要直接从示例代码中复制一些 HTML 和一些 CSS 来制作您想要的每个新幻灯片。提供额外的图像，然后更改新的 prev 的 CSS 位置。和下一个按钮。除了第一个示例之外，下面我还对示例代码进行了一些更改，以满足您的新幻灯片所需的内容。

<div class="newslideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img4.jpg" style="width:100%">
<div class="newtext">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="newnumbertext">2 / 3</div>
<img src="img5.jpg" style="width:100%">
<div class="newtext">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="newnumbertext">3 / 3</div>
<img src="img6.jpg" style="width:100%">
<div class="newtext">Caption Three</div>
</div>

<a id ="prev" class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a id ="next" class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
</div>

------------CSS----------------------------

  /* Next & previous buttons */
  #prev, #next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

  /* Position the "next button" to the right */
  #next {
  right: 0;
  border-radius: 3px 0 0 3px;

  /* Caption text */
  .newtext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.newnumbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

您需要将 CSS 属性“top”、“bottom”和“right”调整到新幻灯片所需的位置。