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（位置）に再びジャンプできるかどうかを調べようとしていることです。また、これが常に2番目のdivに戻り、常に2番目のdivから開始する可能性はありますか？

これが私がこれまでに持っているものです：http：//goo.gl/Cbr8R

どんな助けでもいいでしょう。カスタムビルドを試して、行き詰まります。きっとあなたたちにとっては簡単だと思います;）

ありがとう、R

4

1 に答える 1

1

ギャラリーの指示を台無しにしないでください。右をクリックすると、誰もがギャラリーが左にスライドして「右」のコンテンツが表示されることを期待しています。

ここでは、すべてのギャラリー ロジックの基本を示します。

  • カウンターを作るC
  • クリックでそのカウンターを増減
  • minus leftただやることにアニメーション化する- C * OneSlideWidth
  • カウンターif -1 (LEFT -1 behav.) を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-- ;
    C三項演算子 (?:) を使用 してデ/インクリメントを行うためのダミー変数

    [声明] ？[真の場合] : [偽の場合]

  2. C= C===-1 ? N-1 : C%N ;
    再び Ternary Op. を使用します。: C==0(初期状態) で、左クリックの後:最後C=== -1のスライドにリセットするより ( N-1)
    他のすべての左クリックと右クリックC % Nに対して適用されます:
    %はモジュロ演算子であり、そのリマインダーを返します。Cとの除算N。Cほとんど の場合、最後のスライドでN現在のC UNLESSを返すよりも小さいため、[ RIGHTC===N ] をクリックすると%に変換され0ます。

    アニメーション ロジックleft: -C*Wに実際に適用されるのはleft: -0(最初のスライド) です。

于 2012-11-25T23:24:44.733 に答える