Question

我正在尝试制作滚动旋转木马，与其他旋转木马不同，这个旋转木马不会从幻灯片跳到幻灯片，但只允许用户以50px的速度水平缓慢地穿过它们。

问题是当点击下一步时，一旦数字6框进入完整视图，脚本不应该允许用户继续前进，同样当数字1框在全视图中并且单击prev链接时，用户应该不允许再向后滚动。

现在我无法弄清楚如何做到这一点。

HTML：

<div class="carousel">
    <div class="slide">
        <article class="pod">1</article>
        <article class="pod">2</article>
        <article class="pod">3</article>
        <article class="pod">4</article>
        <article class="pod">5</article>
        <article class="pod">6</article>   
    </div>
</div>

<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>

CSS：

.carousel { 
  position: relative; 
  border: 1px solid red; 
  width: 250px;
  height: 100px;
  overflow: hidden;
}
.carousel .slide { 
  overflow: hidden; 
  position: absolute;
  width: 600px;
}
.carousel .slide .pod { 
  width: 100px; 
  height: 100px; 
  line-height: 100px;
  text-align: center;
  background: blue; 
  box-shadow: 0 0 18px white;
  color: #fff; 
  float: left; 
}

jQuery的：

$('.next').on('click', function() {
  $('.slide').animate({
    left: '-=50'
  });
});
$('.prev').on('click', function() {
  $('.slide').animate({
    left: '+=50'
  });
});

Answer 1

您的.carousel类需要在.pod上具有相同的宽度，因为您将.carousel用作视口。另外，为.animate（）更改50px到100px。

这是我的版本，其中包含建议的更改： http://codepen.io/anon/pen/hcewq

修改

对不起。我把50px的偏移量放回去。我像以前一样进行边界检查，但问题是点击与动画的时间。因此，您需要检查滑块是否超出其边界和是否有动画标记检查以查看上一个动画是否完成，或者它是否会获得最新的偏移。

以下是更新：http://codepen.io/anon/pen/KJBzy

Answer 2

您需要使用一些数学来确定您是否在最后。

这是你的笔，分叉：http://codepen.io/chrisrockwell/pen/dxqbp

主要部分位于if操作的next声明中：

if (Math.abs(slideOffset.left) <= ($slide.width() - $('.carousel').width() - moveBy)) { 
  $slide.animate({
    left: next
  }); 
}

使用此结构，您可以轻松添加.pod，因为在您的CSS中，您可以为.slide提供一个非常大的宽度（例如10000em），它仍然有效。您还可以更改.pod的宽度，而无需修改除CSS之外的任何内容。最后，您可以通过仅更改一个变量来更改其移动量。

要涵盖所有方案，您需要添加更多检查，但这应该可以帮助您入门。

防止滚动超过某一点

2 个答案: