圖庫上一個和下一個按鈕不起作用

Question

我有一個圖像庫，由兩行5個圖像組成，共10個圖像。我將擁有20張圖像，並且當用戶按下下一個按鈕時，圖庫會移動到下面的10張圖像，之前用戶被帶到之前的10張圖像。對於我的生活，我無法弄清楚爲什麼我的上一個和下一個按鈕不起作用。

的jQuery：

var $item = $('div.folder'), //Cache your DOM selector 
     visible = 5, //Set the number of items that will be visible 
     index = 0, //Starting index 
     endIndex = ($item.length/visible) - 1; //End index 

    $('div#arrowR-spring').click(function() { 
     if (index < endIndex) { 
      index++; 
      $item.animate({ 
       'left': '-=315px' 
      }); 
     } else { 
      index = 0; 
      $item.animate({ 
       'left': '+=' + (315 * endIndex) + 'px' 
      }); 
     } 
    }); 

    $('div#arrowL-spring').click(function() { 
     if (index > 0) { 
      index--; 
      $item.animate({ 
       'left': '+=315px' 
      }); 
     } else { 
      index = endIndex; 
      $item.animate({ 
       'left': '-=' + (315 * endIndex) + 'px' 
      }); 
     } 
    }); 

這是我目前有：link to my fiddle。任何幫助將不勝感激！

Answer 1

我不確定你的計算結果，但是你的動畫出現了一些錯誤。嘗試下面加以糾正：

$('#arrowR').click(function(){ 
     if(index < endIndex){ 
      index++; 
      $item.animate({'margin-left':'-=315'}); 
     } else { 
      index = 0; 
      $item.animate({'margin-left':'+='+(315*endIndex)}); 
     } 
    }); 

    $('#arrowL').click(function(){ 
     if(index > 0){ 
      index--;    
      $item.animate({'margin-left':'+=315'}); 
     } else { 
      index = endIndex; 
      $item.animate({'margin-left':'-='+(315*endIndex)}); 
     } 
    }); 

試用演示這裏：http://jsfiddle.net/YRTzG/23/

Answer 2

我只能看到你的HTML代碼中的10個項目是jsfiddle。但是，您正試圖更改剩餘的10個項目的索引，這些項目不存在於HTML中。再次查看HTML代碼，並確保您有20件物品。