Question

对于js幻灯片放映，我一直在努力使其工作如下：

首次加载时：总共三张图片

<div class="images" style="display:block;"><img src="img_1.jpg"></div>
<div class="images" style="display:none;"><img src="img_2.jpg"></div>
<div class="images" style="display:none;"><img src="img_3.jpg"></div>

<a class="prev" onclick="moveSlides(-1)">❮</a>
<a class="next" onclick="moveSlides(1)">❯</a>

首次加载图片时，第一张图片为display:block，而其他两张图片默认为none。

//when next/prev button is clicked
function moveSlides(n) {
    slideShow(n);
};              

function slideShow(n) {                                 
    var slides = document.getElementsByClassName("images");

    // Display none for current image
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

    // display block for next image
    slides[n].style.display = "block";

};

我们的想法是，当点击next或prev按钮时，它会将每张图片转换为display:none，然后将下一张图片更改为display:block。

我在完成以下事情时遇到了一些困难：

检测当前显示的图像，以便在单击next或prev按钮时，它知道要显示的图像。
当它经过最后一张图像时，它应该返回第一张图像。
还有其他问题吗？

Answer 1

首先，我建议使用CSS类来控制哪一个可见：

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

通过这种方式，您可以将它用作JS中的选择器，以便在切换到新的之前找到之前可见的那个。

您还可以使用nextElementSibling和previousElementSibling来查找下一个应该可见的元素。

function slideShow(n) {
    var slide = document.querySelector('.images.visible');
    slide.classList.remove('visible');
    if (n > 0) {
        if (slide.nextSibling) {
            slide.nextSibling.classList.add('visible');
        } else {
            document.querySelector('.images').classList.add('visible');
        }
    } else {
        if (slide.previousSibling) {
            slide.previousSibling.classList.add('visible');
        } else {
            var slides = document.querySelectorAll('.images');
            slides[slides.length - 1].classList.add('visible');
        }
    }
}

这避免了使用循环或选择超过您需要的循环，除非它需要环绕到开头或结尾。

JS完成幻灯片功能

1 个答案: