0

我有一个使用左右箭头滚动每个 div 的滚动器。我需要的是某种 javascript 或 jquery，当幻灯片到达末尾时，我可以通过点击“下一个”或“上一个”按钮来循环回到幻灯片的开头。到目前为止，这是我的代码。我知道有某种类型的循环代码，但我不知道如何实现它以使其工作。除了 jQuery，我不使用文件中添加的任何类型的滚动条/轮播 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);
    });

});
4

0 回答 0