зацикливание списка с использованием эффекта jquery - carousel

Question

Я пытаюсь зациклить список, создавая эффект карусели. Я думаю, что он должен знать в первую очередь количество всех списка, чтобы он мог делать математику. тогда он может сделать что-то вроде этого. Если это добавит на другой стороне, это удалит что-то на другой стороне. Поэтому, если я удалю первый элемент списка, он добавит последний элемент.

$(function() {

    $('#up').mouseenter(goUp);
    $('#down').mouseenter(goDown);

    function goUp() {
        $('#list').last('li').remove;
        $('#list').first('li').append('put the first item here')
    }


    function goDown() {
        $('#list').first('li').remove;
        $('#list').last('li').append('put the first item here')
    }   

}

<a id="up">+</a>
<ul id="list">
    <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ul>

<a id="down">-</a>

Answer 1

У вас там куча ошибок, и я думаю, что ваша логика неверна.Вы хотите использовать .current класс и hide() или show() предметы.Нечто подобное должно работать.

$items.hide().first().addClass('cur').show();

var actions = {
    getCurIdx: function(){ 
        return $items.filter('.cur').index(); 
    },
    goTo: function(idx){
        // Something like...
        $items
       .removeClass('cur').hide()
       .eq(idx).addClass('cur').show();
    },
    next: function(){ 
        var _idx = actions.getCurIdx(); 
        if(_idx < $items.length) { 
            actions.goTo(_idx+1); 
        } else {
            actions.goTo(0); // Go first
        }
    },
    prev: function(){ 
        var _idx = actions.getCurIdx(); 
        if(_idx >= 0) { 
            actions.goTo(_idx-1); 
        } else {
            actions.goTo($items.length-1); // Go last
        }
    }
};

$next.click(function(){ actions.next(); });
$prev.click(function(){ actions.prev(); });

Answer 2

Есть несколько проблем, во-первых, методы last и first не работают так, как вы думаете, вы не передаете им селектор ( doc ), так что вына самом деле делает поиск последнего элемента в согласованном селекторе #list.То, что вы хотите использовать, это селектор :last ( doc ) (и :first), изменяющий ваши селекторы на.

Далее remove - это метод, а не свойство,так что вам не хватает скобок.Также remove вернет объект jQuery, с которым вы работали, чтобы вы могли переместить его в DOM.

Вот jsfiddle , который реализует то, что вы хотите.Он использует методы before и after для правильной вставки нового элемента в DOM.