javascript - div的循环滚动

Question

考虑以下安排（jsfiddle）：

         <------- Full width occupied ------->
---------------------------------------------------------
| Div A | Div B | Div C | Div D | Div E | Div F | Div G | .... H, I, J
---------------------------------------------------------

/* There are Div H, I & J currently not visible */

Button: Left Scroll 
Button: Right Scroll

如果用户按下，Left Scroll - Div H, I & J 依次进入显示区域，但在 J 之后而不是 Div 向左更深地移动，它应该循环回到 A 然后 B 等等。

我已经能够实现运动（见小提琴）但无法使其循环。

Answer 1

您的方法的主要问题是您正在移动容器而不是其子级。为了实现轮播，孩子们必须在屏幕外被洗牌到他们在队列中的适当位置。

我已经使用示例解决方案修改了您的 jsfiddle。 http://jsfiddle.net/HZRSZ/4/

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'});
});

​</p>