jquery - 以循环模式滚动到下一个元素

Question

我正在尝试使用 next 和 prev 箭头来切换图像，并使用 next() 淡化下一张图像，但是当没有图像留下时，它显然不会从第一张图像中回收。如何使此代码工作并让下一个按钮在到达该类的图像元素末尾后转到第一个图像。

我的代码：

$('.nextImage').live('click',function(){
    $('.main-image .zoom:visible').fadeOut(800);
    $('.main-image .zoom:visible').next().fadeIn(800);
});

Answer 1

只需测试是否有下一个元素，如果没有，则返回开头。

$('.nextImage').on('click',function(){  // .live() is deprecated
    var $img = $('.main-image .zoom:visible').last(),  // just want one
        $next = $img.next();
    if (0==$next.length) {
       $next = $img.siblings().first();
    }
    $img.fadeOut(800);
    $next.fadeIn(800);
});

http://jsfiddle.net/tAChA/