Question

除了旋转木马之外还有什么东西使用卷轴来包裹吗？目前我不使用Carousel，因为它似乎堵塞了网站。我在下面使用的JS只能达到div允许的范围。我想要的是当它到达终点并且用户想要回到开头时，用户不必一直点击到左边。他们可以单击右箭头，它将在第一个div处再次开始。我看过wrap = circular但我似乎无法在这里应用它。

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

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

jquery包装圆形滚动

1 个答案: