简单的旋转木马滑块：删除 class 到点击的元素，并将其添加到下一个兄弟

Question

我想实现（纯粹 Javascript，而不是 jQuery）一个简单的 slider/carrousel，这样每次我点击一个图像，它就会隐藏，然后显示下一张图片。

下面的代码几乎可以工作，除了当我们到达末尾时，它没有循环。我想过在case里用一个if ...，但是这样不太优雅

如何制作这个轮播循环？

Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
    element.addEventListener('click', function(e) {  
        element.nextElementSibling.classList.toggle("visible");
        element.classList.toggle("visible");
    });
});

.imgslider { display: none; }
.visible { display: block; }

<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>

注意：如果 div #carousel 只包含一张图片，当我们点击图片时应该没有任何反应。

Answer 1

我找到了(element.nextElementSibling || element.parentNode.firstElementChild)的解决方案：当没有"next"兄弟时，element.nextElementSibling是null，element.parentNode.firstElementChild给出第一个兄弟.这允许轮播在最后循环：

Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
    element.addEventListener('click', function(e) {  
        (element.nextElementSibling || element.parentNode.firstElementChild).classList.toggle("visible");
        element.classList.toggle("visible");
    });
});

.imgslider { display: none; }
.visible { display: block; }

<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>

简单的旋转木马滑块：删除 class 到点击的元素，并将其添加到下一个兄弟

Simple carousel slider: remove class to clicked element, and add it to next sibling

html

javascript

slider

siblings

carousel