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”调整到新幻灯片所需的位置。

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

1 个答案: