Javascript div循环卷轴

考虑以下安排（）：

---------------------------------------------------------
|分区A |分区B |分区C |分区D |分区E |分区F |分区G |。。。。H、 I，J
---------------------------------------------------------
/*目前不存在H、I和J部分*/
按钮：左滚动
按钮：右滚动

如果用户按下左滚动键-Div H，I&J按顺序进入显示区域，但在J之后，而不是Div向左移动得更深，它应该循环回到a，然后是B，依此类推

---

我已经能够完成这个动作（见小提琴），但无法循环。

你的方法的主要问题是你移动的是容器，而不是它的子容器。为了实现旋转木马，孩子们必须在屏幕外移动到队列中的适当位置

我已经用一个示例解决方案修改了您的JSFIDLE。

javascript的外观如下所示：

$('#scroll-left').click(function() {
    $('.inner').first()  //select the first child

        //animate its movement left by using the left margin
        .animate({'margin-left':'-=100px'}, function() {

            //then once the item is off screen move it to the other side
            //of the list and reset its margin
            $(this).appendTo('.wrapper').css('margin-left', '');
        });
});

向右移动和向左移动一样，只是方向相反

$('#scroll-right').click(function() {
    $('.inner').last()
        .css('margin-left', '-=100')
        .prependTo('.wrapper')
        .animate({'margin-left':'+=100'});
});

---

​

您的方法的主要问题是您正在移动容器而不是其子容器。为了实现旋转木马，孩子们必须在屏幕外移动到队列中的适当位置

我已经用一个示例解决方案修改了您的JSFIDLE。

javascript的外观如下所示：

$('#scroll-left').click(function() {
    $('.inner').first()  //select the first child

        //animate its movement left by using the left margin
        .animate({'margin-left':'-=100px'}, function() {

            //then once the item is off screen move it to the other side
            //of the list and reset its margin
            $(this).appendTo('.wrapper').css('margin-left', '');
        });
});

向右移动和向左移动一样，只是方向相反

$('#scroll-right').click(function() {
    $('.inner').last()
        .css('margin-left', '-=100')
        .prependTo('.wrapper')
        .animate({'margin-left':'+=100'});
});

---

​

您试图将这种效果称为循环，但更合适的名称是carousel。此链接可能对您有所帮助：您试图将此效果称为循环，但更合适的名称是carousel。这个链接可能会帮助你：我刚刚开始写这篇文章。你为我节省了一些时间。很好的清洁解决方案。我刚刚开始写这个。你为我节省了一些时间。好的清洁溶液。