使用jquery循環列表-輪播效果

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

存在一些問題，首先last和first方法無法按照您的想法工作，您沒有將選擇器傳遞給它們（ doc ），所以您實際上在做的是在匹配的選擇器中找到最后一個元素的#list 。 您要使用的是:last選擇器（ doc ）（和:first ），將選擇器更改為。

接下來的remove是一種方法，而不是屬性，因此缺少一些方括號。 另外remove將返回您正在處理的jQuery對象，因此您可以在DOM中重新放置它。

這是一個實現所需內容的jsfiddle 。 它使用before和after方法將新項目正確插入DOM中。

Answer 2

那里有很多錯誤，我認為您的邏輯是錯誤的。 您要使用.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(); });