Prev Next with jquery

Question

Ich muss durch Elemente mit vorherigen und nächsten Tasten gehen, aber habe Probleme beim Ausarbeiten, wie es geht. Kannst du helfen. Der prev/next sollte auch kontinuierlich looping sein, dh. Wenn du zum letzten Gegenstand kommst, geht es zum ersten und wenn du zum ersten Gegenstand durch den vorherigen gehst, wird der nächste Klick zum letzten Gegenstand und so weiter führen.

<ul> 
<li>Number 1 item</li> 
<li>Number 2 item</li> 
<li>Number 3 item</li> 
<li>Number 4 item</li> 
</ul> 

Vielen Dank, C

Answer 1

Dies sollte Ihnen den Einstieg: fiddle

Html:

<ul> 
    <li>Number 1 item</li> 
    <li>Number 2 item</li> 
    <li>Number 3 item</li> 
    <li>Number 4 item</li> 
</ul> 
<input type="button" class="next" value=">" /> 
<input type="button" class="prev" value="<" /> 

Javascript:

(function(){ 
    var $lis = $('ul li'); 
    var index = 0, lastIndex = 0; 

    start(); // activate first, add event listeners to buttons 

    function next(){ 
     lastIndex = index; 
     if(++index == $lis.length) index = 0; // if next is out of bounds go to first 
     $lis.eq(index).addClass('active'); 
     $lis.eq(lastIndex).removeClass('active'); 
    }; 

    function prev(){ 
     lastIndex = index; 
     if(--index < 0) index = ($lis.length - 1); // if prev is less than first to to last 
     $lis.eq(index).addClass('active'); 
     $lis.eq(lastIndex).removeClass('active'); 
    }; 
    function start(){ 
     $lis.eq(0).addClass('active'); 
     $('.next').click(next); 
     $('.prev').click(prev); 
    } 
})(); 

Answer 2

Hier ist ein weiteres Beispiel, das Sie verwenden können - posted on jsFiddle