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

how to add more than 2 slideshows in w3 code?(如何在w3代码中添加2个以上的幻灯片？)

问题描述

我使用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="Li9hc3NldHMvbWFuMDAxLmpwZw==" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="Li9hc3NldHMvbWFuMDAyLmpwZw==" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="Li9hc3NldHMvbWFuMDAzLmpwZw==" 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="Li9hc3NldHMvbWFuMDA0LmpwZw==" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="Li9hc3NldHMvMi5wbmc=" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="Li9hc3NldHMvbWFuMDA2LmpwZw==" 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="Li9hc3NldHMvajEuanBn" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="Li9hc3NldHMvajIuanBn" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="Li9hc3NldHMvajMuanBn" 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);

这篇关于如何在w3代码中添加2个以上的幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！