2

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

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

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

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

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

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

这是我到目前为止所拥有的：http: //goo.gl/Cbr8R

任何帮助都会很好。尝试自定义构建并陷入困境。我相信这对你们来说很容易；）

谢谢，R

4

1 回答 1

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 演示

代码说明：

  1. var myID = this.id=='right' ? C++ : C-- ;
    一个虚拟变量，只是为了使用三元运算符 (?:) 进行我们的Cde/incrementations

    [陈述] ？[如果为真]：[如果为假]

  2. C= C===-1 ? N-1 : C%N ;
    再次使用三元操作：如果C==0（初始状态）并在左键单击后：C=== -1将其重置为最后一张幻灯片（N-1）
    对于所有其他左键和右键单击，C % N将应用：
    %是模运算符，它将返回一个提醒C和N的划分 ForC几乎总是小于N它会在最后一张幻灯片中返回当前的C UNLESS ，如果我们单击RIGHT thanC===N并将%其转换为0.

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

于 2012-11-25T23:24:44.733 回答