Question

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

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

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

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

P.S：如果有人可以编辑我的帖子并使我的代码运行，我无法在W3School控制台上自行完成它运行良好

请不要彻底改变我的代码（我使用的是W3School CSS和教程）。

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

＆＃13;

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";
}

＆＃13;

.mySlides {
  display: none
}

.w3-left,
.w3-right,
.w3-badge {
  cursor: pointer
}

.w3-badge {
  height: 13px;
  width: 13px;
  padding: 0
}

＆＃13;

<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>

＆＃13;

Answer 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，否则您的项目符号将无法正确显示。

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

1 个答案: