JQuery位置问题？

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 个变量，第一个获取图像宽度（因此我不需要为每个设备单独编写代码，因为网站是响应式的），第二个获取左侧位置（有问题的那个），第三个让我得到了图像数量（因为会有不止一个这样的画廊），最后一个只是迭代。

现在，"next"按钮的代码如下

$('.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);
});

根据我最后的两个控制台日志，问题似乎是 position 属性在 "if" 条件满足。不要误会我的意思，jQuery 确实遵循 "CSS" 属性命令并将我的列表移回开头，但位置属性仍为负数。

这是我复制的控制台日志信息，希望你明白我的意思：

number2 position-320

number3 position-640

number4 position-960

number2 position-960

目前有4张图，3张常规图，第4张和第1张一样，因为有过渡效果。但是当我在第 4 个并单击下一步时，一切看起来都很好，但我的 "position" 属性仍然在 -960。因此，如果我在那之后单击 "next"，而不是再次将我从 0（css 属性设置的位置）带到 -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

我发现，您在 if true 语句中犯了错误。当 picnum === length 那么你需要将 ul 左位置设置为初始位置（假设为 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位置问题？

JQuery position issue?

javascript

jquery

position

gallery