0

クイックjqueryサイクルの質問:

$.fn.cycle.transitions.uncover = function($cont, $slides, opts) {
    var d = opts.direction || 'left';
    var w = $cont.css('overflow','hidden').width();
    var h = $cont.height();
    opts.before.push(function(curr, next, opts) {
        $.fn.cycle.commonReset(curr,next,opts,true,true,true);
        if (d == 'right')
            opts.animOut.left = w;
        else if (d == 'up')
            opts.animOut.top = -h;
        else if (d == 'down')
            opts.animOut.top = h;
        else
            opts.animOut.left = -w;
    });
    opts.animIn.left = 0;
    opts.animIn.top = 0;
    opts.cssBefore.top = 0;
    opts.cssBefore.left = 0;
};

これは、jquery サイクル アンカバー遷移です。

効果の方向を上にするか下にするか、その場で決めたいと思います。

  • 現在のスライドが 5 枚中 2 枚で、スライド 1 にリンクしているページ ナビゲーションをクリックすると、「上」になるはずです。
  • 現在のスライドが 2/5 で、スライド 5 にリンクしているページ ナビゲーションをクリックすると、方向は「下」になります。

論理部分からは、これは単純な「if」ステートメントによって行われるように見えますが、実際に仕事をやり遂げることができませんでした。

ヒントをいただければ幸いです。

もう 1 つ: scrollVert のようなものがあることは知っていますが、それは私のニーズを満たしていません。scrollVert が機能するように、両方の方法 (上/下) で明らかにする必要がありますが、まったく同じ方法ではありません。

さらに、scrollVert は次のとおりです。

$.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push(function(curr, next, opts, fwd) {
        if (opts.rev)
            fwd = !fwd;
        $.fn.cycle.commonReset(curr,next,opts);
        opts.cssBefore.top = fwd ? (1-next.cycleH) : (next.cycleH-1);
        opts.animOut.top = fwd ? curr.cycleH : -curr.cycleH;
    });
    opts.cssFirst.top = 0;
    opts.cssBefore.left = 0;
    opts.animIn.top = 0;
    opts.animOut.left = 0;
};

私はscrollvert関数を変更しようとしていますが、uncoverにはif d == ...があり、その条件をuncoverからscrollvertに転送する方法がわかりません

4

1 に答える 1

0

次のように、トランジションで$.indexを使用して、現在表示されているスライドと次に表示されているスライドを判断できます。uncover

$.fn.cycle.transitions.uncover = function($cont, $slides, opts) {
    var d = opts.direction || 'left';
    var w = $cont.css('overflow','hidden').width();
    var h = $cont.height();
    opts.before.push(function(curr, next, opts) {
        $.fn.cycle.commonReset(curr,next,opts,true,true,true);
        // find index of Current slide
        var curIndex = $slides.index(curr) + 1;// as it's 0 based
        // find index of Next Slide 
        var nextIndex = $slides.index(next) + 1;
        // now set d based on this two values
        if(curIndex == 2 && nextIndex == 1)
           d = 'up';
        if(curIndex == 2 && nextIndex == 5)
           d = 'down';
        // add as many condition as you want
        if (d == 'right')
            opts.animOut.left = w;
        else if (d == 'up')
            opts.animOut.top = -h;
        else if (d == 'down')
            opts.animOut.top = h;
        else
            opts.animOut.left = -w;
    });
    opts.animIn.left = 0;
    opts.animIn.top = 0;
    opts.cssBefore.top = 0;
    opts.cssBefore.left = 0;
};

上記のコードから、必要なものを理解できることを願っています。または、別の方法が必要な場合はお知らせください。

于 2012-05-15T13:13:56.580 に答える