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个项目。

gallery上一页和下一页按钮不起作用

2 个答案: