如何使用Jquery/JavaScript單擊該圖像滑塊多次滑動？

Question

我正在處理下面的jquery/JavaScript代碼片段。

基本上它是一個面向對象的圖像滑塊。請參閱JSBin上的代碼：http://jsbin.com/eloduj/3/edit#html,live

問題是，當我單擊滑塊導航控件時，它僅在每個方向滑動一次！由於有4個圖像DIV，我怎樣才能使它正常工作？

任何幫助將不勝感激，謝謝

ANSWER共享（從rdcmk一些幫助後）照顧

JS

var cn = { 
    hero : function(r,rc,lx,rx){ 
     rc=$(rc),rcw=rc.width(),rca=rc.size(),rw=rcw*rca;$(r).css({'width':rw}); 
     $(lx).click(function(){n=$(r).position().left-rcw; $(r).animate({left:(n<-rw+rcw?0:n)+'px'},500);}); 
     $(rx).click(function(){n=$(r).position().left+rcw; $(r).animate({left:(n>0?-rw+rcw:n)+'px'},500);}); 
    } 
} 
$(function(){ 
    cn.hero('#reel', '#reel div', '#reel-left', '#reel-right'); 
}); 

HTML & CSS

* { padding:0; margin:0; outline:none; font-family:Arial, Helvetica, sans-serif; } 
#wrap { width:1024px; margin:0 auto; } 

#hero { border:1px dashed lime; position:relative; width:1022px; height:304px; overflow:hidden } 
#hero #reel { border:1px dashed red; position:absolute; height:302px; left:0; } 
#hero #reel div { width: 1018px; height:300px; float:left; } 
#reel-controls { position: absolute; z-index:10; } 

<div id="hero"> 
     <div id="reel"> 
      <div id="pic1" style="background-color:#C3F"></div> 
      <div id="pic2" style="background-color:#0F9"></div> 
      <div id="pic3" style="background-color:#999"></div> 
      <div id="pic3" style="background-color:#6CC"></div> 
     </div> 
     <div id="reel-controls"> 
      <span id="reel-left">left</span> 
      <span id="reel-right">right</span> 
     </div> 
    </div> 

Answer 1

我想我明白了：http://jsbin.com/eloduj/14/edit#html,live

Answer 2

答案很簡單。您目前正在做的事情相當於x=3，而你想x=x+3 ..

做這樣的事情（僞代碼）

$(leftCtrl).click(function(){ 
        var currentLeft = $(reel).offset().left; 
        $(reel).animate({ left: currentLeft-reelChildWidth }, 500); 
     }); 

     $(rightCtrl).click(function(){ 
        var currentlLeft = $(reel).offset().left; 
        $(reel).animate({ left: currentLleft+reelChildWidth }, 500); 

讓我知道這是不是足夠，或者您需要一個運行良好的範例。