将类活动设置为下一个幻灯片元素

Question

我有一个关于 Javascript 的问题。 您可以在下面找到我的 HTML 标记

<div class="slides">
  <div class="slide active" id="one"></div>
  <div class="slide" id="two"></div>
  <div class="slide" id="third"></div>
  <div class="slide" id="fourth"></div>
</div>

<button onclick="slide-down()">
  Next slide
</button>

<button onclick="slide-up()">
  Previous slide
</button>

如果用户单击按钮向下滑动以使用纯 JavaScript 删除“活动”类并将其设置为下一个幻灯片元素，我该怎么办？

Answer 1

您可以使用单个函数，将<button> 元素处的class 设置为"prev" 和"next"，将点击的button .className 传递给函数； .getElementsByClassName()、.nextElementSibling、.previousElementSibling

.active {
  color: green;
}

<div class="slides">
  <div class="slide active" id="one">one</div>
  <div class="slide" id="two">two</div>
  <div class="slide" id="third">third</div>
  <div class="slide" id="fourth">fourth</div>
</div>

<button class="next" onclick="slide(this.className)">
  Next slide
</button>

<button class="prev" onclick="slide(this.className)">
  Previous slide
</button>
<script>
  var active = document.getElementsByClassName("active");

  function slide(prevNext) {
    if (prevNext === "next") {
      if (active[0].nextElementSibling) {
        active[0].nextElementSibling.className = "active";
        active[0].className = "";
      }
    } else {
      if (active[0].previousElementSibling) {
        active[0].previousElementSibling.className = "active";
        active[active.length - 1].className = "";
      }
    }
  }
</script>

Answer 2

类似下面的东西会起作用。使用许多 javascript DOM 属性和方法。您需要稍微更改函数的名称，因为连字符在函数名称中无效。我已经用下划线替换了。

function slide_down(){
    var elems = document.querySelectorAll(".slide");
    var curr = document.querySelector(".active");
    curr.classList.remove("active");
    if(curr.nextElementSibling)
        curr.nextElementSibling.classList.add("active");
    else
        elems[0].classList.add("active");
}

function slide_up(){
    var elems = document.querySelectorAll(".slide");
    var curr = document.querySelector(".active");
    curr.classList.remove("active");
    if(curr.previousElementSibling)
        curr.previousElementSibling.classList.add("active");
    else
        elems[elems.length-1].classList.add("active");
}

.active{background-color:red}

<div class="slides">
  <div class="slide active" id="one">1</div>
  <div class="slide" id="two">2</div>
  <div class="slide" id="third">3</div>
  <div class="slide" id="fourth">4</div>
</div>

<button onclick="slide_down()">
  Next slide
</button>

<button onclick="slide_up()">
  Previous slide
</button>

Answer 3

这是我写的一个例子。 Jasmiec 在我完成之前回答了，老实说，我很喜欢该示例中使用的一些不同方法。如前所述，您需要更改函数的名称，因为连字符会使名称无效。

<div class="slides">
  <div class="slide active" id="one"></div>
  <div class="slide" id="two"></div>
  <div class="slide" id="three"></div>
  <div class="slide" id="four"></div>
</div>

<button onclick="slideDown()">
  Next slide
</button>

<button onclick="slideUp()">
  Previous slide
</button>

<script>
var slides = ["one", "two", "three", "four"]
function slideDown() {
    var element = document.getElementsByClassName('active')[0];
    var index = slides.indexOf(element.id) + 1;
  if (index < slides.length) {
    element.className = "slide";
    document.getElementById(slides[index]).className = "slide active";
  }
}

function slideUp() {
    var element = document.getElementsByClassName('active')[0];
    var index = slides.indexOf(element.id) - 1;
  if (index >= 0) {
    element.className = "slide";
    document.getElementById(slides[index]).className = "slide active";
  }
}
</script>