jquery - 如何根据上一个或下一个幻灯片按键更改 Nivo Slider 中的效果？

Question

我想根据按下的按钮更改 Nivo Slider 上的过渡效果。关于如何做到这一点的任何想法？

更新 为了澄清，我的意思是下一个或上一个按钮，而不是键盘上的按钮。我正在寻找的是，如果一个人按下下一个按钮，就会调用一个 slideToRight 过渡效果。如果有人按下前一个按钮，则会调用一个 slideToLeft 过渡效果。如果有人按下特定的幻灯片，如果它滑动正确的方向，那么锦上添花。我喜欢 Nivo Slider，但我觉得这些应该是默认的可选操作。

Answer 1

$('.nivo-prevNav').live('mouseover', function(){
     $('#slider img').attr("data-transition","sliceUpDown");
});

$('.nivo-nextNav').live('mouseover', function(){
     $('#slider img').attr("data-transition","sliceUpDownLeft");
});

Answer 2

使用按钮

<script type='text/javascript'>
$(document).ready(function() {
    jQuery("#previousButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-prevNav").click();
    });
    jQuery("#nextButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-nextNav").click();
    });
});
</script>

Answer 3

将此添加到“jquery.nivo.slider.js”之前的注释“//运行效果”之后的注释和代码中的“//由“data-transition”属性定义的自定义转换”。如果您单击左箭头或右箭头或按钮，此显示更改当前效果。对于这项工作，您必须在 HTML 中使用不带“data-transition”属性的图像，并且您必须在注释“//默认设置”下的“jquery.nivo.slider.js”中定义默认效果，因为首选“data-transition”属性。我为我的项目编写了正确的代码。

        if(nudge === 'prev'){
            currentEffect = 'slideInLeft';
        } 
        else if (nudge === 'next'){
            currentEffect = 'slideInRight';
        }
        else if (nudge === 'control'){
            currentEffect = 'fade'; /*test*/
        }