1

最後のスライド (margin-left:-2586px;) で停止したいスライダーがあります。

以下の jquery を使用して、クリック時に各スライド間をアニメーション化します (現在は左に移動するだけです)。

問題は、#left をすばやくクリックすると、スライダーが -2586px を超えてしまうことです。これが起こらないようにするにはどうすればよいですか？

$('#left').click(function(){
    var left = 862;
    if($('#slider-visible').css('margin-left') == '-2586px'){
    }
    else{
        $('#slider-visible').animate({'margin-left':'-=' + left},500);
    }
});

ありがとう！

4

3 に答える 3

1

要素がアニメーションの途中にあるかどうかを確認します。そうである場合は、アニメーションを再度実行しないでください。

else{
    if($('#slider-visible:animated').length == 0){
       $('#slider-visible').animate({'margin-left':'-=' + left},500);
    }
}
于 2013-01-09T23:08:20.883 に答える
1

なぜこれが間違っているのですか？

$('#left').click(function(){
    var left = 862;
    if($('#slider-visible').css('margin-left') == '-2586px'){
    }
    else{
        $('#slider-visible').animate({'margin-left':'-=' + left},500);
    }
});

アニメーションキューを停止せず（を使用して.stop()）、正確な位置を検出するため-=に使用して使用しようとして==います....間違っています

正しく構築されたスライダーには、カウンター.stop()と...
カウンターがあります。
アニメーションは通常、以下に応じて作成されます。

  • 要素の数、
  • クリック=カウンターを増やす（「前の」ボタンの場合は減らす）
  • とのようなアニメーションleft: - counter*oneSlideWidth
  • カウンタを0にリセットするこの単純なロジックcounter = counter % numberOfSlides
  • さらに、カウンターをに-1設定した値よりも（存在しない左スライド）の値に達しているかどうかを確認し、numberOfSlides-1再度実行します。

 $('#slider').stop().animate({left: -counter * slideWidth });

基本的なスライダーロジック：

var galleryWidth = $('#gallery').width(), 
    counter = 0,
    numberOfSlides = $('#gallery .slides').length;


$('#prev, #next').click(function() {

   if( this.id=='next'){
      counter++;
      counter = counter % numberOfSlides ; // will reset to '0' if both match
   }else{ // prev was clicked
      counter--;
      if(counter==-1){
         counter = numberOfSlides-1 ;
      }
   }

   $('#slider').stop().animate({left: - counter * galleryWidth  }, 700);

});

または単に：

$('#prev, #next').click(function() {      
   var myId = this.id=='next' ? counter++ : counter-- ;
   counter = counter===-1? numberOfslides-1 : counter%numberOfSlides;     
   $('#slider').stop().animate({left: - counter * galleryWidth  }, 700);
});
于 2013-01-09T23:08:33.573 に答える
0

これをテストするとうまくいくと思います： var element=$('#left');
else{ $('#slider-visible').animate({element.style.marginLeft=left},500); }

于 2013-01-09T23:20:03.840 に答える