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;
               }    
});

第一个问题： 它应该移动slider8000px 宽的 div，一个页面是 800px 宽，所以要向左或向右移动画廊，我slider通过单击箭头更改 div 的左属性。我试图以某种方式调试它。
Firefox首先，值为x0 然后，当我单击右箭头（顺便说一下，左箭头在任何浏览器中都可以正常工作）时，值为x1，左属性更改为-800（不，不是 800px，因为我必须使用parseInt，但它有效）。
其他浏览器：它改变左属性的值x但不改变左属性。alert(x)throws 1as it should but leftproperty throws NaN，并且在 10clicks 后，它应该开始工作，但它仍然会抛出NaN.
第二个问题：
CSS 过渡。
我想让我的画廊漂亮而生动，所以我使用了 CSStransition属性并将其设置为1second;. 它工作正常，更改页面需要 1 秒。所以它很好地改变了 left 属性，例如从 800px 到 1600px。但是，当我第二次单击箭头时，第一个动画还没有完成，它会增加或减去另一个 800 像素到那一秒设置的值。例如，我单击，它从 800 变为 1600，但是当我单击左值约为 500 像素时，它增加了 800 像素，左值现在为 1300 像素，我的画廊看起来不像它应该的那样。有什么方法可以阻止我的 jQuery 代码再次运行，直到第一个动画完成？

这是整个代码 http://jsfiddle.net/QuyjZ/

4

1 回答 1

1

第一个问题

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

第二个问题...

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

但实际上您应该计算页数并乘以索引 * 800 以获得您的位置

于 2013-02-09T12:56:17.637 回答