通过幻灯片向后循环

Question

我有以下jQuery：

            var $active = $('#slideshow li.active');

            if ( $active.length == 0 ) $active = $('#slideshow li:last');

            // use this to pull the images in the order they appear in the markup
            var $next =  $active.next().length ? $active.next()
                : $('#slideshow li:first');

            // uncomment the 3 lines below to pull the images in random order

            // var $sibs  = $active.siblings();
            // var rndNum = Math.floor(Math.random() * $sibs.length );
            // var $next  = $( $sibs[ rndNum ] );


            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 500, function() {
                    $active.removeClass('active last-active');
                });

如何修改它以便我可以向后循环？

我已经做到了这一点，但它并没有循环回到第一个元素。我必须做一些相当简单的事情，但是我真的不能把手指放在上面。

            var $active = $('#slideshow li.active');

            if ( $active.length == 0 ){ $active = $('#slideshow li:last');}

            // use this to pull the images in the order they appear in the markup
            var $next =  0 ? $active.prev()
                : $('#slideshow li:first');

            // uncomment the 3 lines below to pull the images in random order

            // var $sibs  = $active.siblings();
            // var rndNum = Math.floor(Math.random() * $sibs.length );
            // var $next  = $( $sibs[ rndNum ] );


            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 500, function() {
                    $active.removeClass('active last-active');
                });

Answer 1

currrent解决方案检查active元素后面是否有元素。我们将更改此内容以查看之前是否有 active元素。原始后备是选择#slideshow中的第一个列表项。我们将选择最后一个。

var $next = $active.prev().length ? $active.prev() : $('#slideshow li:last');

如果你不熟悉三元运算符，它与编写if语句基本相同：

// If there are previous elements
if ( $active.prev().length > 0 ) {
    // The next element will be the previous element
    $next = $active.prev();
} else {
    // The next element will be the last list item in #slideshow
    $next = $("#slideshow li:last");
}