0

我有一个图片库，由两行 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'
           });
       }
   });

这是我目前拥有的：链接到我的小提琴。任何帮助将不胜感激！

4

2 回答 2

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/

于 2013-03-12T04:16:42.970 回答
0

我只能看到您的 HTML 代码中有 10 个项目是 jsfiddle。但是您正在尝试更改 HTML 中不存在的剩余 10 个项目的索引。再次查看 HTML 代码并确保那里有 20 个项目。

于 2013-03-12T04:07:32.037 回答