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 回答