jQuery环绕循环滚动

Question

除了旋转木马以外，还有使用滚动条包装的东西吗？ 目前，我不使用Carousel，因为它似乎阻塞了该网站。 我在下面使用的JS只能达到div所允许的范围。 我想要的是到达终点时，用户想回到起点，而用户不必一直单击左侧。 他们可以点击向右箭头，它将在第一格再次开始。 我已经看到了wrap =圆形，但似乎无法在此处应用它。

JS

$(function () {

    var animating = false,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        if (animating) {
            return;
        }
        var dir = (this.id === "right") ? '+=' : '-=';
        animating = true;
        outerwrap.animate({
            scrollLeft: dir + '251'
        }, 1000, function () {
            animating = false;
        });
    });

});

的HTML

<div class="outerwrapper">
   <div class="innerwrapper">
       <div class="prod">
       <div class="prod">
       <div class="prod">
       <div class="prod">
   </div>
</div>

<div>
    <div class="left" id="left"></div>
    <div class="right" id="right"></div>
</div>

Answer 1

我将在最后一个元素上添加一个标记，并在当前元素上添加一个类。

然后，我将检查活动元素是否具有最后一个类，如果有，则left: 0动画left: 0

JS

$(function () {

    var animating = false,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        if (animating) {
            return;
        }
        var dir = (this.id === "right") ? '+=' : '-=';
        animating = true;

        $('.active').removeClass('active').next().addClass('active');
        if($('.active').hasClass('last')){
            outerwrap.animate({
                scrollLeft: 0
            }, 1000, function () {
                animating = false;
            });
        }else{
            outerwrap.addClass('active').animate({
                scrollLeft: dir + '251'
            }, 1000, function () {
                animating = false;
            });
        }
    });

});

HTML

<div class="outerwrapper">
   <div class="innerwrapper">
       <div class="prod active">
       <div class="prod">
       <div class="prod">
       <div class="prod last">
   </div>
</div>

<div>
    <div class="left" id="left"></div>
    <div class="right" id="right"></div>
</div>

希望这是有道理的。 我还没有测试好运：p