1

我正在尝试制作一个滚动轮播，与其他轮播不同，这个轮播不会从一个幻灯片跳到另一个幻灯片，而是只允许用户以 50px 的速度水平缓慢地移动它们。

http://codepen.io/anon/pen/pyLfz

问题是单击下一步时，一旦第 6 号框进入全视图，脚本不应允许用户继续前进，同样当第 1 号框处于全视图并单击上一个链接时，不应允许用户再往回滚动。

现在我不知道该怎么做。

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

2 回答 2

0

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

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

编辑

对不起。我把 50px 的偏移量放回去了。我和以前一样有边界检查，但问题是点击与动画的时间。因此，您需要检查滑块是否超出其边界并检查动画标志以查看之前的动画是否完整，否则它不会获得最新的偏移量。

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

于 2013-09-12T16:43:54.287 回答
0

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

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

主要部分在if您的next行动声明中：

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

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

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

于 2013-09-12T17:38:26.043 回答