Question

有一些带有一些物体的容器，在我的情况下是带有li的。在这个容器中有固定的对象数，没有隐藏，也不可能。当我单击左侧时，第一个对象应该是动画左转并从容器的右侧添加。

在前。

 1 2 3

按左键开始动画＆lt; - 1左转

我们有1 2 3 1

向右侧添加1个对象，并从左侧与1个对象同步移动。动画完成和结果

2 3 1

它几乎像其他滑块一样，但容器后面没有隐藏或不可见的元素。

HTML

<div class="wrapper">
    <a class="left" href="#">&lt;</a>
    <div class=slider>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
            <li class="yellow"></li>
        </ul>
    </div>
    <a  class="right"  href="#">&gt;</a>
</div>

JS

$('a.left').on('click', function(){
    var $self = $(this);
    var $parent = $self.closest('.wrapper');
    var $ul = $parent.find('ul');
    var $first = $ul.find('li').first();
    $first.clone().appendTo($ul);
    $first.remove();    
});

http://jsfiddle.net/GmanG/j8Lttyxs/5/

我不知道如何做到这一点（动画）。

谢谢。

没有隐藏或隐形元素的滑块

0 个答案: