Question

我正在尝试将多个幻灯片添加到一页，但是遇到了一些困难。我可以添加两个可以正常运行的幻灯片，但是当我添加三分之一时，一切都会中断。

有人可以建议一种将多个幻灯片添加到一页的解决方案吗？

这是codepen：https://codepen.io/anon/pen/YmWNqMc

HTML：

[1] "lexical error: invalid char in json text.\n                                       option={xAxis:{type:'category',\n                     (right here) ------^\n"

CSS：

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)"></a>
  <a class="next" onclick="plusSlides(1, 0)"></a>
</div>

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://www.w3schools.com/howto/img_band_ny.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)"></a>
  <a class="next" onclick="plusSlides(1, 1)"></a>
</div>

JAVASCRIPT：

* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
}

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

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

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  color: black;
}

Answer 1

更新了代码，可以轻松运行3个幻灯片。
您只需修改您的js代码（就像我一样）；

添加第三个幻灯片的班级名称，
致电showSlides(1, id);。

var slideIndex = [1,1,1];
var slideId = ["slide", "slide2", "slide3"]
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";  
}

* {box-sizing: border-box}
.mySlides{display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
}

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

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

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  color: black;
}

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides slide">
    <img src="https://picsum.photos/150/150" style="width:100%">
  </div>

  <div class="mySlides slide">
    <img src="https://picsum.photos/150/151" style="width:100%">
  </div>

  <div class="mySlides slide">
    <img src="https://picsum.photos/151/150" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">prev</a>
  <a class="next" onclick="plusSlides(1, 0)">next</a>
</div>

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides slide2">
    <img src="https://picsum.photos/152/150" style="width:100%">
  </div>

  <div class="mySlides slide2">
    <img src="https://picsum.photos/150/152" style="width:100%">
  </div>

  <div class="mySlides slide2">
    <img src="https://picsum.photos/150/154" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">prev</a>
  <a class="next" onclick="plusSlides(1, 1)">next</a>
</div>

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides slide3">
    <img src="https://picsum.photos/152/151" style="width:100%">
  </div>

  <div class="mySlides slide3">
    <img src="https://picsum.photos/151/152" style="width:100%">
  </div>

  <div class="mySlides slide3">
    <img src="https://picsum.photos/151/154" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 2)">prev</a>
  <a class="next" onclick="plusSlides(1, 2)">next</a>
</div>

一页上有多个幻灯片

1 个答案: