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

我有一个关于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删除“活动”类并将其设置为下一个幻灯片元素，我该怎么办？

类似于以下内容的操作将起作用。使用许多javascript DOM属性和方法。您需要稍微更改函数的名称，因为连字符在函数名称中无效。我用下划线代替了

函数滑下（）{
var elems=document.queryselectoral（“.slide”）；
var curr=document.querySelector（“.active”）；
当前类列表删除（“活动”）；
if（当前下一个远程入口同级）
当前nextElementSibling.classList.add（“活动”）；
其他的
元素[0]。类列表。添加（“活动”）；
}
函数向上滑动（）{
var elems=document.queryselectoral（“.slide”）；
var curr=document.querySelector（“.active”）；
当前类列表删除（“活动”）；
if（当前先前元素同级）
curr.previousElementSibling.classList.add（“活动”）；
其他的
元素[elems.length-1].classList.add（“活动”）；
}

.active{背景色：红色}

1.
2.
3.
4.
下一张幻灯片
上一张幻灯片

类似于以下内容的操作将起作用。使用许多javascript DOM属性和方法。您需要稍微更改函数的名称，因为连字符在函数名称中无效。我用下划线代替了

函数滑下（）{
var elems=document.queryselectoral（“.slide”）；
var curr=document.querySelector（“.active”）；
当前类列表删除（“活动”）；
if（当前下一个远程入口同级）
当前nextElementSibling.classList.add（“活动”）；
其他的
元素[0]。类列表。添加（“活动”）；
}
函数向上滑动（）{
var elems=document.queryselectoral（“.slide”）；
var curr=document.querySelector（“.active”）；
当前类列表删除（“活动”）；
if（当前先前元素同级）
curr.previousElementSibling.classList.add（“活动”）；
其他的
元素[elems.length-1].classList.add（“活动”）；
}

.active{背景色：红色}

1.
2.
3.
4.
下一张幻灯片
上一张幻灯片

您可以使用单个函数，将

处的

类设置为
“prev”
和
“next”
，通过单击的
按钮
.className
运行
.getElementsByClassName（）
，
.nextElementSibling
，
。以前的elementsibling


.active{
颜色：绿色；
}

一
二
第三
第四
下一张幻灯片
上一张幻灯片
var active=document.getElementsByClassName（“active”）；
功能幻灯片（上一页，下一页）{
如果（上一个==“下一个”）{
if（活动[0]。nextElementSibling）{
活动[0]。nextElementSibling.className=“活动”；
活动[0]。类名称=”；
}
}否则{
if（活动[0]。上一个元素同级）{
活动[0]。previousElementSibling.className=“活动”；
活动[active.length-1].className=“”；
}
}
}
您可以使用单个函数，将
处的
类设置为
“prev”
和
“next”
，通过单击的
按钮
.className
运行
.getElementsByClassName（）
，
.nextElementSibling
，
。以前的elementsibling


.active{
颜色：绿色；
}

一
二
第三
第四
下一张幻灯片
上一张幻灯片
var active=document.getElementsByClassName（“active”）；
功能幻灯片（上一页，下一页）{
如果（上一个==“下一个”）{
if（活动[0]。nextElementSibling）{
活动[0]。nextElementSibling.className=“活动”；
活动[0]。类名称=”；
}
}否则{
if（活动[0]。上一个元素同级）{
活动[0]。previousElementSibling.className=“活动”；
活动[active.length-1].className=“”；
}
}
}
这是我写的一个例子。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>


下一张幻灯片
上一张幻灯片
变量幻灯片=[“一”、“二”、“三”、“四”]
函数slideDown（）{
var元素=document.getElementsByClassName（'active'）[0]；
var index=slides.indexOf（element.id）+1；
如果（索引<幻灯片长度）{
element.className=“幻灯片”；
document.getElementById（幻灯片[索引]）.className=“幻灯片活动”；
}
}
函数slideUp（）{
var元素=document.getElementsByClassName（'active'）[0]；
var index=slides.indexOf（element.id）-1；
如果（索引>=0）{
element.className=“幻灯片”；
document.getElementById（幻灯片[索引]）.className=“幻灯片活动”；
}
}
这是我写的一个例子。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>


下一张幻灯片
上一张幻灯片
变量幻灯片=[“一”、“二”、“三”、“四”]
函数slideDown（）{
var元素=document.getElementsByClassName（'active'）[0]；
var index=slides.indexOf（element.id）+1；
如果（索引<幻灯片长度）{
element.className=“幻灯片”；
document.getElementById（幻灯片[索引]）.className=“幻灯片活动”；
}
}
函数slideUp（）{
var元素=document.getElementsByClassName（'active'）[0]；
var index=slides.indexOf（element.id）-1；
如果（索引>=0）{
element.className=“幻灯片”；
document.getElementById（幻灯片[索引]）.className=“幻灯片活动”；
}
}
对于初学者来说，函数名中的
-
无效，因此请删除该选项！首先，您应该看看您所看到的这个示例