Question

我想实现（使用纯Javascript，而不是jQuery）一个简单的滑块/转盘，这样，每当我单击图像时，它都会将其隐藏并显示下一张图像。

以下代码几乎可以正常工作，只是当我们到达最后时，它不会循环。我曾考虑过在这种情况下使用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)的解决方案：当没有“下一个”同级时，则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>

简单的轮播滑块：将类删除到单击的元素，然后将其添加到下一个同级

1 个答案: