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

根据nivo滑块文档here，您可以通过在任何或所有图像上添加自定义数据属性来更改每张幻灯片的效果，它将覆盖nivo的默认转换：

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />

您可以通过在文档正文上设置事件处理程序来查找按键，然后使用下面的代码段更改所有图像的attr来动态更改此自定义数据：

     $('body').on('keypress', function(){
            $('img').attr("data-transition","slideInLeft");
            });

您可以通过添加一些逻辑来基于按下的键来获得更高级和更改到特定类型的过渡，但这是一般的想法。这里有一个工作小提琴：http://jsfiddle.net/gregjuva/2ZXCp/

Answer 3

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

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

Answer 4

使用按钮

<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>

如何根据上一张或下一张幻灯片按键改变Nivo Slider的效果？

4 个答案: