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

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/