0

我有两个具有不同类的图像，但我希望将相同的 JavaScript 应用于两者。该 javascript 基本上允许通过单击按钮进行幻灯片放映，但这仅适用于具有mySlides类的图像，而不适用于albums类。看一看：

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
  var i;
  var x = document.querySelectorAll(".mySlides, .albums");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  };
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="inner">
  <img class="mySlides" src="./imgs/IMG_1552.JPG">
  <img class="mySlides" src="./imgs/IMG_0915.jpg">
  <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>
</div>

<div class="inner">
  <img class="albums" src="./imgs/travis.jpg">
  <img class="albums" src="./imgs/killy.jpg">
  <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>
</div>

按钮应该移动到下一个图像，例如从“travis.jpg”到“killy.jpg”，但它只适用于 mySlides 类而不是专辑类

4

1 回答 1

0

问题在于 var x = document.querySelectorAll(".mySlides, .albums"); 正如您必须了解的那样，如果您想为两个类的第二个元素执行此查询，则此查询将选择所有 4 个元素，您将不得不使用

var x = document.querySelectorAll(".mySlides");
var y = document.querySelectorAll(" .albums");

并在两个 var 上分别运行进一步的逻辑

于 2021-01-26T19:52:19.567 回答