Question

我想尝试使用jQuery制作幻灯片，但我发现很难创建一个类slides的数组。下面的代码有问题吗？

$(document).ready(function() {
    var slideIndex = 0;
    var slides = $('.slides');
    slides[slideIndex].show();

    $('.next').click(function() {
        var i;  
        if (slideIndex > slides.length) {
            slideIndex = 0;
        }

        for (i = 0; i < slides.length; i++) {
            slides[i].hide();
        }

        slideIndex++;
        slides[slideIndex].show();

        var pageNum = slideIndex + 1;
        $('.numbertext').innerHTML(pageNum + "/" + slides.length);
    });

    $('.prev').click(function() {
        var i;

        if (slideIndex < 0) {
            slideIndex = slides.length;
        }

        for (i = 0; i < slides.length; i++) {
            slides[i].hide();
        }

        slideIndex--;
        slides[slideIndex].show();
    });
});

Answer 1

您的[""]数组将包含DOM节点，而不是jQuery对象。因此，当您想在一个单独的元素上应用jQuery方法时，例如slides或hide()，您必须将该元素作为jQuery对象。最好不要将show()数组元素用于此目的，而是应用[i]方法：这将为您提供eq(i)方法可用的jQuery对象。

例如，更改：

show/hide

为：

slides[slideIndex].show();

...等

请注意，出于相关原因，没有必要循环slides.eq(slideIndex).show();来隐藏每个元素。你可以隐藏这个集合：

替换：

slides

使用：

for (i = 0; i < slides.length; i++) {
    slides[i].hide();
}

另一个问题是您的slides.hide();范围检查。它位于错误的位置，slideIndex应为slideIndex > slides.length

<{1}}或slideIndex >= slides.length之后，将if条件放在

之后。

如何使用jQuery制作幻灯片？

1 个答案: