Question

我有一个幻灯片，可以通过上一个和下一个按钮手动控制。它工作正常，但使用insertBefore和insertAfter感觉很草率，所以我想探索一些其他方法。相反，我在想“如果这是最后一张图片，请回到第一张图片，然后再往后走。”

这是我的代码，但是当它到达最后一张图像时它没有得到所需的结果（它应该在第一张图像中淡入并从头开始。

Syntaxual？ if (slide == $('.z:last'))对我来说很可疑。

测试网站：http://brantley.dhut.ch/

谢谢！

这是我的JavaScript：

        $('#next').click(function() {
            var slide = $('.z:visible'),
                next  = $('.z:visible').next();

            slide.fadeOut(400, function() {
                slide.removeClass('active');
                if (slide == $('.z:last')) {
                    $('.z:first').addClass('active');
                    bromance();
                    $('.z:first').fadeIn(400);
                } else {
                    next.addClass('active');
                    bromance();
                    next.fadeIn(400);
                }
            });
            return false;
        });

Answer 1

为什么不使用slide = $('.active')并尝试使用:first-child代替:first

Answer 2

试试这个：

if (slide[0] == $('.z:last')[0]) { ...

jQuery不会直接返回对DOM元素的引用，它返回一个类似于数组的对象，其中每个数组元素都是与您使用的选择器匹配的DOM元素。这意味着比较两个选择器的结果是比较两个不同的类似数组的对象，即使它们包含相同的元素也不会匹配。比较每个数组中的第一个元素（因为在你的情况下，你总是期望只有一个元素）。

Answer 3

我会比较元素ID的相等性。

将if (slide == $('.z:last'))更改为if (slide.attr('id') === $('.z:last').attr('id'))。

或者，您可以测试最后一张幻灯片是否可见：

if ($('.z:last:visible')) {
    // last slide is visible
}

Answer 4

next = $（'。z：visible'）。next（）;

检查以下情况并相应指定下一张图片。

if($('.z:last')){
   next = $(".z:first")
}
else{
   next  = $('.z:visible').next();
}

jQuery如果那么幻灯片问题

4 个答案: