Question

请允许我在stackoverflow上说这个社区有多喜欢这个前缀，并且它总是非常有用的浏览和问题，所以非常感谢！

问题所在。所以我有一个客户端想要一个幻灯片，如果按下右侧导航箭头，可以从右侧滑动图像→向左滑动>左侧，如果按下左箭头，则从左侧滑动到>向右滑动

目前在nivo-slider的配置文档中（它是我真正使用的唯一一个）我似乎无法总是向右滑动或总是向左滑动（slideInLeft，slideInRight）。

有没有，例如，描绘哪个被按下，并运行该动画方法而不是通常的那个？

提前致谢， Aleski。

Answer 1

我刚刚注意到这个问题 - 我回答Chris's similar question，这个解决方案也应该对你有用：

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

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

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

var $body = $("body");
var $images = $("img");

$body.on('keydown', function(e) {
  if(e.keyCode == 37) { // left 
     $images.attr("data-transition","slideInLeft");
  }
  else if(e.keyCode == 39) { // right
     $images.attr("data-transition","slideInRight");
            }
    });

这里有一个工作小提琴：http://jsfiddle.net/gregjuva/YJaVS/

Answer 2

在评论“//运行效果”之前，将其添加到“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 3

我通过将以下代码放在nivoRun文件的jQuery.nivo.slider.js函数中（就在初始化currentEffect变量之后）来解决这个问题：

if(settings.effect === 'slideInLeftRight')
{
    if(nudge === 'prev')
    {
        currentEffect = 'slideInRight';
    }
    else
    {
        currentEffect = 'slideInLeft';
    }
};

此代码会创建一个名为slideInLeftRight的效果。

slideInLeftRight效果会在按下slideInRight按钮时使用prev效果，并在按下slideInLeft按钮时使用next效果

使用slideInLeftRight效果，如下所示：

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'slideInLeftRight',
        ...
    });
});
</script>

Nivo Slider滑动解决方法（并非总是朝一个方向滑动）

3 个答案: