2

我正在使用带有自定义动画的 jquery 循环插件。它工作得很好！

但是，我希望幻灯片根据 index# 向右或向左推进，即如果用户单击链接 1 而幻灯片 #3 是活动幻灯片，动画将向右过渡，而如果链接 4 是单击幻灯片将​​过渡到左侧。

我正在寻找的功能与 scrollHorz/scrollVert 转换相同。

我知道我需要一些逻辑来关联当前帧和下一帧： if (frameclicked on is a higher index than the current slide) {animate to the left} else {animate to the right}

我只是不知道在哪里把它放在代码中。我希望这是有道理的。任何帮助将不胜感激！谢谢！

并不是说它可能有帮助，但我的自定义代码如下。

$('#s4').before('<div id="nav" class="nav">').cycle({
    fx:     'custom',

    cssBefore:{
            left:1000,
            opacity:0,
            display:'block'
        },
    animIn:{
            left:0,
            opacity:100
        },
    animOut:{
            left:-1000,
            opacity:0
        },
    cssAfter:{
            display:'none'
        },
    speed:  'slow',
    easeIn: 'easeInExpo',
    easeOut: 'easeInExpo',
    next: '.nextnav',
    prev: '.previous',
    timeout: 0,
    containerResize: 1,
    fit: 0,
    height: 600,
    pager: '#slideshow-nav',
    pagerAnchorBuilder: function(idx, slide) {
            return '#slideshow-nav li:eq(' + (idx) + ')';
        }

});
4

2 回答 2

4

您需要连接到onPrevNextEvent. 他们有一个叫做isnextwich gets pass 的东西，它基本上告诉你你要去哪个方向。

示例我更新了一个我昨天为循环制作的小提琴。

http://jsfiddle.net/gx3YE/12/

$(function() {

$('#megaWrapper').cycle({
    next : "#next",
    prev : "#prev",
    timeout : 0,
    onPrevNextEvent: function(is,i,el) {
        if (is === true) {
            alert('slide right');
        }
        else {
            alert('slide left'); 
        }
    }

});

});

于 2011-04-18T04:31:30.607 回答
2

您所描述的不是 Cycle 核心功能的一部分吗？

这是我的做法：

$('.slideshow').cycle({
    fx: 'scrollHorz',
    timeout: 0,
    next:   '#next', 
    prev:   '#prev'     
});
于 2011-06-15T17:07:20.510 回答