jQuery循环滚动条 - 需要代码将滚动条循环回到开始onclick

Question

我有一个滚动条，使用左右箭头滚动每个div。我需要的是某种javascript或jquery，当幻灯片到达结尾时，通过点击“下一个”或“上一个”按钮，我可以循环回到幻灯片的开头。到目前为止，这是我的代码。我知道有一些类型的循环代码，但我不知道如何实现它以使其工作。除了jQuery之外，我不使用文件中添加的任何类型的scroller / carousel js代码。

代码在这里：http://jsfiddle.net/aj3ub/

JS

//this is used to call open the ID that contains where the scrolling starts

function overviper() {
    el = document.getElementById("overviper");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}


// these are used to click through left and right within the scroller


$(function () {  // DOM READY shorthand

    $("#rightbox, #leftbox").click(function () {
        var dir = this.id == "rightbox" ? '+=' : '-=';
        $(".all").stop().animate({ scrollLeft: dir + '990' }, 1000);
    });

});


$(function () {  // DOM READY shorthand

    $("#rightbox1, #leftbox1").click(function () {
        var dir = this.id == "rightbox1" ? '+=' : '-=';
        $(".all").stop().animate({ scrollLeft: dir + '985' }, 1000);
    });

});

$(function () {  // DOM READY shorthand

    $("#rightbox2, #leftbox2").click(function () {
        var dir = this.id == "rightbox2" ? '+=' : '-=';
        $(".all").stop().animate({ scrollLeft: dir + '985' }, 1000);
    });

});

$(function () {  // DOM READY shorthand

    $("#rightbox3, #leftbox3").click(function () {
        var dir = this.id == "rightbox3" ? '+=' : '-=';
        $(".all").stop().animate({ scrollLeft: dir + '985' }, 1000);
    });

});

$(function () {  // DOM READY shorthand

    $("#rightbox4, #leftbox4").click(function () {
        var dir = this.id == "rightbox4" ? '+=' : '-=';
        $(".all").stop().animate({ scrollLeft: dir + '985' }, 1000);
    });

});

$(function () {  // DOM READY shorthand

    $("#rightbox5, #leftbox5").click(function () {
        var dir = this.id == "rightbox5" ? '+=' : '-=';
        $(".all").stop().animate({ scrollLeft: dir + '985' }, 1000);
    });

});

$(function () {  // DOM READY shorthand

    $("#rightbox6, #leftbox6").click(function () {
        var dir = this.id == "rightbox6" ? '+=' : '-=';
        $(".all").stop().animate({ scrollLeft: dir + '985' }, 1000);
    });

});