javascript - 两个函数的变量不能一起工作

Question

我在同时使用两个函数的变量时遇到了一点问题。在这种情况下，这两个功能都不能同时工作。这是我的两个功能：

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(" red", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " red";
}


var slideIndex = 1;
showDivs2(slideIndex);

function plusDivs2(n) {
  showDivs2(slideIndex += n);
}

function currentDiv2(n) {
  showDivs2(slideIndex = n);
}

function showDivs2(n) {
  var i;
  var x = document.getElementsByClassName("mySlides2");
  var dots = document.getElementsByClassName("demo2");
  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(" red", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " red";
}

.mySlides {
  display: none;
}

.mySlides2 {
  display: none;
}

<div class="content">
  <img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
  <img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
  <img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px; height: 200px;">
</div>

<div class="center">
  <div class="section">
    <button class="button light-grey" onclick="plusDivs(-1)">❮ Prev</button>
    <button class="button light-grey" onclick="plusDivs(1)">Next ❯&lt;/button>
  </div>
</div>

<div class="content2">
  <img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
  <img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
  <img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px;height: 200px;">
</div>

<div class="center">
  <div class="section">
    <button class="button light-grey" onclick="plusDivs2(-1)">❮ Prev</button>
    <button class="button light-grey" onclick="plusDivs2(1)">Next ❯&lt;/button>
  </div>
</div>

在此，我有两个 div 包含带有下一个和上一个按钮的图像，默认情况下正在加载第一个功能的图像，但是当我单击按钮时，会出现第二个图像。我只想修复它，即两个 div 的图像都将加载默认值。

标签： javascriptfunction