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

如果用户按“左滚动 - Div H”、“I”和“J”按顺序进入显示区域，但在 J(而不是 Div)向左更深移动之后，它应该循环回到 A，然后 B，依此类推。

我已经能够实现该动议(参见 fiddle )，但无法使其循环。

Answer 1

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

我已经用示例解决方案修改了您的 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'});
});

​