jquery自定义转换就像揭开 - 需要动态设置方向

时间:2012-05-15 11:27:36

标签: jquery cycle jquery-cycle

快速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循环揭示过渡。

如果效果方向上升或下降,我想立即决定。

  • 如果当前幻灯片是2个中的5个,我单击页面导航链接到幻灯片1然后它应该是“向上”。
  • 如果当前幻灯片是2的5,我点击页面导航链接到幻灯片5,那么方向应该是“向下”

从逻辑部分来看,这似乎是通过一个简单的“if”语句完成的,但我已经尝试过并且无法完成任务。

任何提示都将不胜感激!

还有一件事:我知道有类似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功能,但在发现时有一个if d == ...并且dunno如何将该条件从uncover转移到scrollvert

1 个答案:

答案 0 :(得分:0)

您可以在uncover转换中使用$.index确定当前正在显示哪个幻灯片以及下一个幻灯片,如下所示

$.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;
};

我希望您现在可以从上面的代码中找出您想要的内容。或者,如果您不想要,请告诉我。