Question

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

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

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

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

我单击右键然后滑动到下一个div，当我点击它继续移动。

我的问题是，在div集的末尾，我正试图解决它是否可以再次跳回到开始div（位置）。此外，是否有可能总是回到第二个div，并始终从第二个div开始？

以下是我目前的情况：http://goo.gl/Cbr8R

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

谢谢， [R

Answer 1

永远不要乱看画廊的方向。如果你点击右边，每个人都希望画廊向左滑动，露出“正确”的内容。

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

创建一个计数器C
点击增加/减少该计数器
只需minus left

- C * OneSlideWidth

将计数器如果 -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

代码说明：

var myID = this.id=='right' ? C++ : C-- ;
使用三元运算符（？:)

进行C de / increment的虚拟变量

[声明]？ [if true]：[if false]
C= C===-1 ? N-1 : C%N ;
再次使用Ternary Op。：如果C==0（初始状态）和 LEFT 后点击：C=== -1，请将其重置为最后一张幻灯片（N-1）
对于所有其他 LEFT 和 RIGHT 点击，将应用C % N：
%是Modulo运算符，它会返回C和N除法的提醒。对于C几乎总是小于N，它将返回当前C 除非在最后一张幻灯片中，如果我们点击 RIGHT 而不是C===N，%会将其转换为0。

适用于我们的动画逻辑left: -C*W的实际上是left: -0（第一张幻灯片）。

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

1 个答案:

jsBin demo with gallery essentials