Question

所以我正在jQuery中建立一个小型画廊。

var picwidth = $('.gallery-window ul li').width();
var left1 = $('.gallery-window ul').position().left;
var length = $('.gallery-window ul li').length;
var picnum = 1;

您可以看到，我做了4个变量，第一个变量获取图像宽度（因此，由于网站响应，我不需要为每个设备使用单独的代码），第二个变量获取左侧位置（< strong>有问题的图片），第三个图片为我提供了一定数量的图片（因为将有一个以上的此类画廊），最后一个只是迭代。

现在，“下一步”按钮的代码如下

$('.gallery-next').click(function() {
  if (picnum === length) {
  $('.gallery-window ul').css("left", "0px").animate({left: left1 -= picwidth}, 500);
    picnum = 2;
  }
  else {
    $('.gallery-window ul').animate({left: left1 -= picwidth}, 500);
    picnum++;
  }

  console.log("number" + picnum);
  console.log("position" + left1);
});

基于我最后拥有的两个控制台日志，问题似乎是，满足“ if”条件时，position属性不会返回0。不要误会我的意思，jQuery确实遵循“ CSS”属性的顺序并将我的列表移回到开头，但是position属性保持为负。

这是我的控制台日志信息，希望您能理解我的意思

number2 position-320

number3 position-640

number4 position-960

number2 position-960

由于过渡效果，到目前为止有4张图像，其中3张为常规图像，第4张与第一张图像相同。但是当我在第4个位置并单击下一步时，一切看起来都不错，但是我的“位置”属性仍为 -960 。因此，如果我在此之后单击“下一步”，而不是再次将我从0（css属性设置为0）带到-320，它立即将我带到 -1280 ，这不用说，弄乱了我的画廊。

任何想法可能是什么原因导致的，如何解决？

Answer 1

您可能已经注意到了，但是您没有将left1设置为0，那么为什么将其设置为0？在if的两个分支中，您都设置left1-= picwidth，因此将看到console.logs。

如果我是你，我将在if中更改变量值，然后在那之后做任何你想做的事情：

$('.gallery-next').click(function() {
    if (picnum === length) {
        left1 = 0;
        picnum = 2;
    }
    else {
        left1 -= picwidth;
        picnum++;
    }

    $('.gallery-window ul').animate({left: left1 }, 500);

    console.log("number" + picnum);
    console.log("position" + left1);
});

Answer 2

我发现，如果您的陈述是正确的，那么您就是在犯错。当picnum === length时，您需要将ul的左位置设置为initial（让我们说0）。

if (picnum === length) {
  $('.gallery-window ul').css("left", "0px").animate({left: 0}, 500);
  picnum = 2;
} else {
  $('.gallery-window ul').animate({left: left1 -= picwidth}, 500);
  picnum++;
}

如果仍然无法正常工作，请在此处分享您的示例代码，或者上传并分享到任何实时URL中以获取清晰的想法。

jQuery排名问题？

2 个答案: