Question

为了学习的目的，我想在Jquery中创建一个垂直的无限旋转木马，旋转木马对于第一个角色来说效果很好但是之后停止并开始复制元素......任何人都知道我做错了什么？

 Thank you.

http://jsfiddle.net/boumaig/685TP/2/

        $(function($){
            $next = $('.next');
            $list = $('li');
            $q    = 0;

            var aux = {
                 clone_ithem : function(list){
                    this.list = list;
                    list.eq($q).clone(true).appendTo('ul')
                 },
                 remove_ithem : function(list){
                    this.list = list;
                    list.eq($q).remove();
                    if($q <= $list.length - 2){
                        $q++;
                    }else{
                        $q = 0;
                    }    
                }
            }

            $next.click(function(event){

                aux.clone_ithem($list);
                aux.remove_ithem($list);
                event.preventDefault();
            });
            //Jquery END Line
        });

Html代码：

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <div id="nav">
        <a href="#" class="next">next</a>
    </div>

Answer 1

您可以考虑通过在ul的末尾添加第一个元素来切换位置，而不是克隆和删除元素。

代码：

 $(function ($) {
     $next = $('.next');
     $list = $('ul');

     var aux = {
         clone_item: function (list) {
             this.list = list
             $(list).find('li:first').appendTo(list);
         }
     }

     $next.click(function (event) {
         aux.clone_item($list);
         event.preventDefault();
     });
 });

演示：http://jsfiddle.net/IrvinDominin/Tj4c2/

从头开始在jquery中的垂直无限旋转木马

1 个答案: