如何在w3代码中添加2个以上的幻灯片?

2022-04-17 00:00:00 javascript slideshow

我使用w3代码在一个页面中插入多个幻灯片(https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_two)

我尝试添加第三个幻灯片,但根本不起作用。我在函数(ShowSlides)中遗漏了一些东西,非常感谢您的帮助。

代码如下:

html:

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="./assets/man001.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man002.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man003.jpg" style="width:100%">
  </div>

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

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="./assets/man004.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/2.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/man006.jpg" style="width:100%">
  </div>

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

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides3">
    <img src="./assets/j1.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j2.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j3.jpg" style="width:100%">
  </div>

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

这里是js:

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);


function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

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

我是一个初学者,所以我在这方面很吃力。非常感谢你的帮助!

我已经很久没有使用w3.js了,但在代码中,它们将图像标记为类mySlides1,而您已经创建了一个并在其中添加了图像,尝试向图像本身添加类并删除推荐答案,同时添加容器div,就像示例代码中一样

此外,为了检查您是否没有遗漏任何内容,请复制准确的代码并查看是否可以工作,复制工作代码并粘贴它们,将类从mySlides2更改为mySlides3

第三:为了让它工作,我做了以下工作: 我在slideIndex中添加了第三个[1],因为有3张幻灯片:

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

相关文章