Question

我正在创建我自己的第一个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);
   }
}

我确实没有任何线索导致多余的空间。如果有任何错误的编码，请告诉;我正在学习过程，就像这里的每个人都是=）

Answer 1

我发现了问题：

Image1的动画早于Image2的动画完成，所以遇到此代码的时候：

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

在image2完成动画制作的时间内，需要几个像素的距离。

新问题：

在将位置设置为image2之前，如何确保image2完成动画设置？

JQuery滑块空间“溢出”

1 个答案: