0

我为一些内容输入了一个快速的 jQuery 滑块框。现在我只有 3 个面板或页面，并在单击“上一个”或“下一个”时让它们循环显示。我现在唯一遇到的麻烦是让它在结束时禁用按钮。目前，您可以继续单击下一步，并且容器会一直向左或向右移动。

我将如何实现这一目标？我想过在第一张/最后一张幻灯片中添加一个类，并告诉它是否有这个类来隐藏链接？不过，这可能不是最友好的方式。我想我想让它检查是否有另一个子 div，如果没有，则禁用该按钮。这样，如果我将来需要，我可以添加更多面板，并且 jQuery 将知道何时禁用该按钮。

这是我目前拥有的：http ://codepen.io/anon/full/xdilq

任何帮助将不胜感激！

4

2 回答 2

1

jsBin 演示

pagesN = $('.pages').length;
var c = 0;

function anim(){
  c = c===-1 ? pagesN-1 : c%pagesN;
  $('.pageContainer').stop().animate({left: -422*c }); 
}


$('.previous, .next').click(function(){
  var myClass = $(this).hasClass('next') ? ++c : --c;
  anim();
});

单击时增加或减少 var c。比在 animate 内部有一个三元运算符，它可以防止c转到-1(prev) 并将其始终保持在最大范围 (next) 中，这要归功于模运算符：

c = c===-1 ? pagesN-1 : c%pagesN;

于 2012-10-31T16:41:29.847 回答
0

当动画完成时将变量增加 1 或相应地减少呢？当这个变量在第三步时，你隐藏按钮，否则你显示它们。就像是

var counter = 1;
$('.next').click(function() {
  $('.pageContainer').animate({
    "left": "-=422px"
  }, 1000, function() {
    counter++;
    if(counter >= 3){ // or panels.length
      // hide button "next"
    }
  });
});
于 2012-10-31T16:23:29.193 回答