Question

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

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

以下是我目前所拥有的内容：http://codepen.io/anon/full/xdilq

任何帮助都会有很大的帮助！

Answer 1

<强> jsBin demo

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();
});

点击增加或减少变量c。与动画内部相比，有一个三元运算符会阻止c转到-1（上一个），并且由于模运算符而将其保持在最大范围（下一个）：

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

Answer 2

当动画完成或相应减少时，如何将变量递增1？当此变量位于第3步时，您将隐藏按钮，否则您将显示它们。像

这样的东西

var counter = 1;
$('.next').click(function() {
  $('.pageContainer').animate({
    "left": "-=422px"
  }, 1000, function() {
    counter++;
    if(counter >= 3){ // or panels.length
      // hide button "next"
    }
  });
});

使上一个/下一个按钮消失

2 个答案: