javascript - jquery 循环幻灯片 - 添加幻灯片上一个/下一个进度(lascrollHorz)以及自定义动画

Question

我正在使用带有自定义动画的 jquery 循环插件。效果很好!

但是，我希望幻灯片根据索引号向右或向左前进，即，如果用户单击链接 1，而幻灯片 #3 是事件幻灯片，则动画将过渡到右侧，而如果单击幻灯片上的链接 4 将过渡到左侧。

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

我知道我需要的是一些逻辑来关联当前帧和下一帧:if(单击的帧比当前幻灯片的索引更高){向左动画} else {向右动画}

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

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

$('#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 的东西，它会被传递，它基本上会告诉你你要去哪个方向。

示例我更新了昨天为循环制作的 fiddle 。

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

}); 

});