簡單的JQuery滑塊，不想使用插件

Question

我有以下代碼，我已經實現了這樣的東西，但我想添加「NEXT」，「PREV」功能，爲此我需要suggesstion。

<div id="slider"> 
<div class="wrap"> 
<div class="panel">Panel1</div> 
<div class="panel">Panel2</div> 
<div class="panel">Panel3</div> 
</div> 

<div class="previous">This need Implementation</div> 
<div class="next">This need Implementation</div> 

</div> 

<div class="nav"> 

<ul> 
<li> panel1</li> 
<li> panel2</li> 
<li> panel3</li> 
<ul> 

</div> 


$(document).ready(function() { 

$(".wrap .panel:not(.active)").fadeOut(); 
$(".wrap .panel:first(.active)").fadeIn(); 

$(".nav ul li").click(function (event) { 

$(this).addClass('current').siblings().removeClass('current'); 

$(".wrap .panel").stop(true, true).fadeOut().eq($(this).index()).fadeIn(); 

}); 
}); 

Answer 1

你需要存儲當前窗格的指數顯示

var currentIndex = 0;// store current pane index displayed 
var ePanes = $('#slider .panel');// store panes collection 
function showPane(index){// generic showPane 
    // hide current pane 
    ePanes.eq(currentIndex).stop(true, true).fadeOut(); 
    // set current index : check in panes collection length 
    currentIndex = index; 
    if(currentIndex < 0) currentIndex = ePanes.length-1; 
    else if(currentIndex >= ePanes.length) currentIndex = 0; 
    // display pane 
    ePanes.eq(currentIndex).stop(true, true).fadeIn(); 
    // menu selection 
    $('.nav li').removeClass('current').eq(currentIndex).addClass('current'); 
} 
// bind ul links 
$('.nav li').click(function(ev){ showPane($(this).index());}); 
// bind previous & next links 
$('.previous').click(function(){ showPane(currentIndex-1);}); 
$('.next').click(function(){ showPane(currentIndex+1);}); 
// apply start pane 
showPane(0);