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＆amp; J按顺序进入显示区域，但是在J而不是向左移动更深的Div之后，它应该循环回A然后B再循环。

我已经能够实现这个动作（见小提琴）但无法使其成为Round-Robin。

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

div的循环滚动

1 个答案: