0

除了使用滚动条来包装的 Carousel 之外，还有其他东西吗？目前我不使用 Carousel，因为它似乎堵塞了网站。我在下面使用的 JS 只能在 div 允许的范围内使用。我想要的是当它到达结尾并且用户想要回到开头时，用户不必一直点击到左边。他们可以单击右箭头，它将从第一个 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>
4

1 回答 1

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

于 2013-10-01T12:37:03.717 回答