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 の内部よりも(prev)cに移動するのを防ぎ-1、モジュロ演算子のおかげで常に最大範囲 (next) に維持する三項演算子があります。

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

于 2012-10-31T16:41:29.847 に答える
0

アニメーションが完了したときに変数を 1 増やしたり、それに応じて減らしたりするのはどうですか? この変数が 3 番目のステップにある場合はボタンを非表示にし、それ以外の場合は表示します。何かのようなもの

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 に答える