Question

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

但是，我希望幻灯片向右或向左前进，具体取决于索引＃，即如果用户点击链接1，而幻灯片＃3是活动幻灯片，则动画将向右转移，而如果单击链接4将滑动到左侧。

我正在寻找的功能与scrollHorz / scrollVert过渡相同。

我明白我需要的是一些逻辑来关联当前帧和下一帧：if（frameclicked on是一个比当前幻灯片更高的索引）{animate to the left} else {animate to 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) + ')';
        }

});

Answer 1

您需要加入onPrevNextEvent。他们有一些名为isnext的东西，它基本上会告诉你你要去哪个方向。

示例我更新了一个小提琴，我昨天掀起了一段时间。

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'); 
        }
    }

});

}）;

Answer 2

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

我是这样做的：

$('.slideshow').cycle({
    fx: 'scrollHorz',
    timeout: 0,
    next:   '#next', 
    prev:   '#prev'     
});

jquery循环幻灯片 - 添加幻灯片上一个/下一个进度（一个la scrollHorz）以及自定义动画

2 个答案: