Question

我用点击功能编写了代码。如果用户单击“下一步”，则将“onscreen”类设置为下一个元素我想要的是具有类“onscreen”的元素，滚动到顶部，动画持续时间为1秒。

这是我的代码：

HTML

<div class="slides">
  <div class="slide onscreen" 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>

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

  <button class="prev" onclick="slide(this.className)">
  Previous slide
  </button>
</div>

CSS

.buttons{
    width:170px;
    position:fixed;
    top:10px;
    left:50%;
    margin-left:-85px;
}

.onscreen {
  background-color: green;
}

的Javascript

window.onload = function() {
  var slide = document.getElementsByClassName("slide");
  for (var i = 0; i < slide.length; i++) {
    var heightslide = slide[i].offsetHeight;
  }
  console.log(heightslide);
}
var active = document.getElementsByClassName("onscreen");

function slide(prevnext) {
  if (prevnext === "next") {
    if (active[0].nextElementSibling) {
      active[0].nextElementSibling.className = "slide onscreen";
      active[0].className = "slide";

    }

  } else {
    if (active[0].previousElementSibling) {
      active[0].previousElementSibling.className = " slide onscreen ";
      active[active.length - 1].className = "slide";
    }
  }
}

希望有人能帮助我。

非常感谢

如何实现滚动到顶部

0 个答案: