0

基本的な CSS と HTML、jQuery を使って簡単なギャラリーを作ったのですが、バグが少なく、何が悪いのかわかりません。Firefox では問題なく動作しますが、他のブラウザでは動作しません。ここにコードがあります

$(document).ready(function(){

 var x=0; var lava=0;
  //right arrow
$("#p_sipka").click(function(){
  if(x<9){
          x++; //used as a "position counter"
          lava = parseInt($("#slider").css("left"), 10); //parse a value of slider css.left property into var lava
          lava=lava-800; //substract 800 (pixels) - WORKS FINE IN FIREFOX, THROWS NaN in other browsers
          $("#slider").css("left",lava);  //set new value to slider
         }
  else if(x==9){
                $("#slider").css("left","0px");
                x=0;
               }    
});

最初の問題:slider幅 8000px の div を 移動する必要があり、1 ページは幅 800px であるため、ギャラリーを左または右に移動sliderするには、矢印をクリックして div の left プロパティを変更します。何とかデバッグしてみました。
Firefoxまず、 の値xは 0 です。次に、右矢印をクリックすると (ちなみに、左矢印はどのブラウザでも問題なく動作します)、値xは 1 になり、左のプロパティは-800(いいえ、800px ではなく、使用する必要があるため) に変更されます。 parseInt ですが、動作します)。
その他のブラウザ: left プロパティの値を変更しますxが変更しません。alert(x)本来のようにスロー1されますが、leftプロパティは NaN をスローし、10 クリック後、正常に機能し始めますが、それでもスローしNaNます。
2番目の問題:
CSS トランジション。
ギャラリーを素敵でアニメーションにしたかったので、CSStransitionプロパティを使用して に設定しました1second;。ページを変更するのに 1 秒かかります。たとえば、左のプロパティを 800px から 1600px にうまく変更しています。しかし、矢印を2回クリックすると、最初のアニメーションがまだ終了していないため、その秒に設定された値にさらに800ピクセルが追加または減算されます。たとえば、クリックすると、800 から 1600 に変化しますが、左の値が約 500px のときにクリックすると、800px が追加され、左の値が 1300px になり、ギャラリーが正常に表示されません。最初のアニメーションが終了するまで jQuery コードが再度実行されないようにする方法はありますか?

ここにコード全体があります http://jsfiddle.net/QuyjZ/

4

1 に答える 1

1

最初の問題

 lava = parseInt($("#slider").css("left").replace(/px$/i,""), 10)

2番目の問題...

lava = math.Ceil(parseInt($("#slider").css("left").replace(/px$/i,""), 10)/800)*800

しかし実際には、代わりにページ数を数え、インデックス * 800 を掛けて位置を取得する必要があります

于 2013-02-09T12:56:17.637 に答える