图库上一个和下一个按钮不起作用

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件物品。