0

私は最初の独自のJQueryスライダーを作成していますが、かなりの道のりを歩んできました。

私が欲しいもの：

スライダーの「次へ」ボタンをクリックすると、Image2がスライダーdivの左側に設定され、image1が内側に設定されます。Image1は、スライダーdivの外側で右端までスクロール（アニメーション化）します。Image2がdiv内に設定されると、image1のz-indexはimage1よりも低く設定されるため、その下に配置できます。これで、image1はdiv内のimage2の下にも配置され、このプロセスを繰り返すことができます。

私が持っているもの（問題）：

私はほとんど上記を作成しましたが、スライド/アニメーション化すると、画像がdivの外に出てしまうことがあります。どのdivにも奇妙なマージン/パディングがないことを確認しました。スライダーdivと画像はすべて同じ幅（1050）と高さ（230）です。

コード：

function SlideRight(){
   if (!$("#IMAGE1").is(':animated') || $("IMAGE2").is(':animated')){

      if(counter == images.length - 1){
         counter = -1;
      }

      if(IsImageOneSet){    
         Image2.src=images[counter + 1];
         $("#IMAGE2").css('left', $("#IMAGE2").position().left-1050);
         $("#IMAGE1").animate({
            "left": "+=1050px", 
            queue: false
         }, "slow", function(){
            $("#IMAGE1").css('left', $('#IMAGE2').position().left);
            $("#IMAGE1").css('z-index', '0');
            $("#IMAGE2").css('z-index', '1');
            $("#Next").bind('click');
         });
         $("#IMAGE2").animate({"left": "+=1050px", queue: false}, "slow");  

      } else {
         Image1.src = images[counter + 1];      
         $("#IMAGE1").css('left', $("#IMAGE1").position().left-1050);
         $("#IMAGE2").animate({
            "left": "+=1050px",
            queue: false
         }, "slow", function(){
             $("#IMAGE2").css('left', $('#IMAGE1').position().left);
             $("#IMAGE1").css('z-index', '1');
             $("#IMAGE2").css('z-index', '0');
             $("#Next").bind('click');
         });
         $("#IMAGE1").animate({"left": "+=1050px", queue: false}, "slow");
      }

      counter++;
      IsImageOneSet = !IsImageOneSet;   
      window.clearInterval(interval);
      interval = window.setInterval(SliderInterval, 7000);
   }
}

私は文字通り、余分なスペースを引き起こしているものの手がかりを持っていません。また、コードが正しくない場合は、教えてください。私はここにいるみんなのように学習過程にあります=）

4

1 に答える 1

0

私は問題を見つけました：

Image1のアニメーションはImage2のアニメーションよりも早く終了したため、このコードに出くわすと次のようになります。

$("#IMAGE1").css('left', $('#IMAGE2').position().left);

image2のアニメーション化が完了するまでには、非常に数ピクセルの距離が必要です。

新しい問題：

位置をimage2に設定する前に、image2のアニメーション化が完了していることを確認するにはどうすればよいですか？

于 2012-10-23T22:03:29.720 に答える