一页上的多个幻灯片不再起作用答案

【问题标题】：Multiple slideshows on one page not work anymore一页上的多个幻灯片不再起作用
【发布时间】：2018-01-07 05:45:43
【问题描述】：

我的名字是瑞秋，我是新来的。我之前尝试过查看一些帖子，但我知道在答案没有解决我的问题之前有人问过这个问题，因为我有不同的 cod（其他名称和其他变量）。

问题是左右箭头移动向下幻灯片

我试过这个： Multiple slideshows on one page makes the first one not work anymore

还有这个： How to add a second slideshow on the same webpage

附注：如果有人可以编辑我的帖子并使我的代码运行，我无法在 W3School 控制台上自己完成它运行完美

请不要大幅更改我的代码（我使用了 W3School CSS 和教程）。

这是我的 HTML + Javascript + CSS（外部）：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-white";
}

.mySlides {
  display: none
}

.w3-left,
.w3-right,
.w3-badge {
  cursor: pointer
}

.w3-badge {
  height: 13px;
  width: 13px;
  padding: 0
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />

<body>

  <div class="w3-container">
    <h2>Slideshow Indicators</h2>
    <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
  </div>

  <div class="w3-content w3-display-container" style="max-width:800px">
    <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
    <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
    <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
      <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
      <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>

  <div class="w3-container">
    <h2>Slideshow Indicators</h2>
    <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
  </div>

  <div class="w3-content w3-display-container" style="max-width:800px">
    <img class="mySlides2" src="img_nature_wide.jpg" style="width:100%">
    <img class="mySlides2" src="img_fjords_wide.jpg" style="width:100%">
    <img class="mySlides2" src="img_mountains_wide.jpg" style="width:100%">
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
      <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
      <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
  </div>






</body>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

顶部<script> 中的函数与底部<script> 中的函数名称相同，这就是它们被覆盖的原因。本质上，两个滑块都调用functions 的底部定义。一个快速而肮脏的修复只是重命名底部的：

var slideIndex -> var slideIndex2

function plusDivs(n) -> function plusDivs2(n)

function currentDiv(n) -> function currentDiv2(n)

function showDivs(n) -> function showDivs2(n)

记得将重命名函数中提到的slideIndex 更新为slideIndex2。

另外，在您的 mySlides2 html 中，更改 onclick= 以匹配您的新函数名称。

总结一下： - 通过在末尾添加“2”重命名第二个<script> 标签中的所有内容

-然后让你的第二个滑块 html 调用重命名的函数而不是原来的函数。

编辑：

我刚刚注意到，您还需要在底部滑块 html 标记中重命名 css 类 demo，否则您的项目符号将无法正确显示。

【讨论】：

好的，成功了！！！但即使在将 demo 更改为 demo2 后，底部滑块上的项目符号也不会移动（它显示 3 个空项目符号）有什么想法吗？
我现在在火车上，但我可以沿途查看一下
你在showDivs(..)函数中用demo2替换demo了吗？
是的，我喜欢这里：onclick="plusDivs2(1)">❯

var dots2 = document.getElementsByClassName("demo2");

有什么想法吗？请问？