jquery - 循环具有固定位置的水平滚动 div

Question

我有一个 div .project-container，其中包含一堆具有设置高度和宽度的 div。我已经将其设置为滑动到一个位置，该位置在使用一些 jQuery 单击时增加。

$("#right").click(function() {
    $(".project-container").animate(
            {"left": "+=1060px"},
            "slow");
});
$("#left").click(function() {
    $(".project-container").animate(
            {"left": "-=1060px"},
            "slow");
});

.project-container 中的每个 div 使用以下 jQuery 彼此绝对定位

$('.one-project').each(function(i){
  $(this).css({ left: 1060 * i });
});

我点击右键，它会滑到下一个 div，当我点击它时，它会继续移动。

我的问题是，在 div 集的末尾，我正在尝试计算它是否可以再次跳回到开始的 div(位置)。另外，是否有可能总是回到第二个 div，并总是从第二个 div 开始？

这是我目前拥有的:http://goo.gl/Cbr8R

任何帮助都会很好。尝试自定义构建并卡住。我相信这对你们来说很容易 ;)

谢谢，R

Answer 1

永远不要弄乱画廊的方向。如果您单击 RIGHT，每个人都希望画廊向左滑动以显示“RIGHT”内容。

这是任何图库逻辑的基础:

• 创建一个计数器C
• 点击增加/减少计数器
• 动画到 minus left 只是做 - C * OneSlideWidth
• 将计数器 if -1(LEFT -1 行为)固定为 numberOfSlides-1
的数量
• 对于任何其他点击执行counter % numberOfSlides

逻辑是这样的:

var W = $('.slide').width(); // one slide width
var N = $('.slide').length;  // number of slides
var C = 0;                   // counter

$('#slider').width( W*N );   // (if needed) to make space for left floated images

$('#left, #right').click(function(){
     var myID = this.id == 'right' ? C++ : C-- ;
     C= C===-1 ? N-1 : C%N ;
     $('#slider').stop().animate({left: -C*W }, 1000 );
});

jsBin demo with gallery essentials

代码解释:

1. var myID = this.id=='right' ? C++ : C-- ;
   一个虚拟变量，用于使用三元运算符 (?:)
   

   执行我们的 C de/incrementations

   [statement] ? [if true] : [if false]

2. C= C===-1 ? N-1 : C%N ;
   再次使用三元运算:如果 C==0(初始状态)并且在 LEFT 单击之后:C=== -1 则将其重置为最后一张幻灯片( N-1)
   对于所有其他LEFT 和RIGHT 点击将应用C % N:
   % 是 Modulo 运算符，它将返回 C 和 N 除法的提示。因为 C 几乎总是小于 N 它将返回当前的 C UNLESS在最后一张幻灯片中，如果我们点击 RIGHT，C===N 和 % 会将其转换为 0 .
   
   应用于我们的动画逻辑 left: -C*W 实际上是 left: -0(第一张幻灯片)。