Question

我如何制作它以使滑块只向左滑动直至“红色”滑动，直到“绿色”幻灯片下方的jQuery？我觉得我错过了一些简单的东西，但我现在还没有看到它。 moveLeft函数似乎有效，但moveRight没有。

var slideWidth = $('#mySliderContainer').width();
var slideCountWidth = $('#mySlider').children().length;

var min = 0;
var max = -(slideCountWidth -1) * slideWidth;

function moveLeft() {
  $('#mySlider').animate({
    left: '+='+slideWidth
  }, 400);
  if($('#mySlider').position().left >= min) {
    $('#mySlider').animate({left: '-='+slideWidth});
  }
};

function moveRight() {
  $('#mySlider').animate({
    left: '-='+slideWidth
  }, 400);
  if($('#mySlider').position().left <= max) {
    $('#mySlider').animate({left: '+='+slideWidth});
  }
};

实施jQuery的链接位于jsFiddle。

理想情况下，如果您尝试超过最小和最大幻灯片，它应该反弹（要么是“红色”或“绿色”幻灯片）。我显然对这段代码做错了。

var max = -(slideCountWidth -1) * slideWidth;

Answer 1

您的max正确，因为拖动工作正常。您的问题似乎是您正在moveRight()断开并与正常动画并行执行退回脚本。这意味着当您检查position().left <= max时，div通常位于幻灯片之间，并且比较不准确。

我会在之前进行位置检查你做标准动画，然后根据需要将反弹链回到标准动画：

function moveLeft() { var isMin = $('#mySlider').position().left >= min; var a = $('#mySlider').animate({ left: '+='+slideWidth }, 400); if(isMin) { a.animate({left: '-='+slideWidth}); } }; function moveRight() { var isMax = $('#mySlider').position().left <= max + slideWidth; var a = $('#mySlider').animate({ left: '-='+slideWidth }, 400); if(isMax) { a.animate({left: '+='+slideWidth}); } };

Updated Fiddle

Answer 2

你是对的，问题是你的最大值并不是要考虑滑块容器对滑块位置值的贡献所带来的边距。

将最大计算更改为：

var max = (-(slideCountWidth -1) * slideWidth) + parseFloat($("#mySliderContainer").css("marginLeft")) ;

http://jsfiddle.net/uhtxtnks/9/

为了澄清，您可以在moveRight（）函数中添加一个警报，以在动画后输出$（＆＃39;＃mySlider＆＃39;）。position（）。left的值。请注意，当您进入绿色幻灯片时，该值实际上是-629.5（至少在我的小提琴上），而不是您期望的-750。那是因为jQuery .position（）。left方法是将#mySliderContainer元素的左边距添加到偏移量，并且该边距是120.5（在我的小提琴上）。因此，考虑到这一点，您只需要将容器左边距添加到最大计算中。

jQuery .position（）。left和variables

2 个答案: