javascript - 连续 JS slider

Question

对于这个“照片图像” slider ，我就快到了:http://jsfiddle.net/4z4Lok9y/1/

当我转到幻灯片 3 并点击“下一页”时，我希望它返回到幻灯片 1。(没有跳过幻灯片 2，即“抖动 Action ”)。

同样，当我在幻灯片 1 上并点击“上一张”时，我想转到幻灯片 3 而无需跳转。

修复我的 jsfiddle 的这个 Action 的最小、最简单的方法是什么？

$(document).ready(function(){
    var slides = $('.js-slide');
    var i = 0;
    $('.navigation a.nav-right').click(function(){
    i = ++i % slides.length;
    $('.slide-wrapper').animate(
    {
        'left' : -(slides.eq(i).position().left)},300);
    });
    $('.navigation a.nav-prev').click(function(){
    i = --i % slides.length;
    $('.slide-wrapper').animate(
    {
        'left' : -(slides.eq(i).position().left)},300);
    });
});

谢谢

Answer 1

也许像这样http://jsfiddle.net/4z4Lok9y/2/

$(document).ready(function(){
        var slides = $('.js-slide');
        var i = 0;
        $('.navigation a.nav-right').click(function(){
            i = ++i % slides.length;

            if(i==0)
            {
                var l=0                
                $('.slide-wrapper').css('left',l);
                return;
            }

            $('.slide-wrapper').animate({
                'left' : -(slides.eq(i).position().left)},300);
        });

        $('.navigation a.nav-prev').click(function(){
            i = --i % slides.length;

            if(i==-1)
            {
                var l=-slides.eq(i).position().left                
                $('.slide-wrapper').css('left',l);
                return;
            }

            $('.slide-wrapper').animate({
                'left' : -(slides.eq(i).position().left)},300);
            });

});