Question

所以我的页面上有一个NivoSlider。我的问题是，我希望第一张幻灯片只显示2秒，所有其他幻灯片显示5秒（第一张只是一些文字“产品版本2在这里”）。我怎样才能做到这一点？我没有在http://nivo.dev7studios.com/support/找到任何（好的）文档。

这是我试过的：

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        pauseTime:2000,
        pauseOnHover: false,
        controlNav:false,
        directionNav:true,
        directionNavHide:true,
        effect:'sliceDown',
        captionOpacity: 0.9,
        afterChange: function(){$('#slider').nivoSlider().defaults({pauseTime:5000})}       
    });
});
</script>

此处的最后一行afterChange: function(){$('#slider').nivoSlider().defaults({pauseTime:5000})}被调用，但我尝试更改初始设置失败 - 它只会破坏动画（从一张幻灯片翻转到下一张幻灯片而不是动画）并且不会更改暂停时间。

有没有人知道如何在运行期间更改幻灯片之间的暂停/延迟？

Answer 1

我遇到了同样的问题，因为我有一个带有3个滑块的页面，我们希望每5秒更换一次，这意味着每个都有15秒暂停时间，第二个需要5秒延迟，并且第3次需要10秒的延迟。我尝试了上述解决方案和许多其他解决方案，但无法使用多个滑块。我最后通过添加一个新设置＆＃34; recurPauseTime＆＃34;来修复它。然后将以下内容添加到nivo：animFinished函数：

clearInterval(timer);
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.recurPauseTime);

这允许我将其设置为：

slider1：

pauseTime: 5000,
recurPauseTime:15000

slider2：

pauseTime: 10000,
recurPauseTime:15000

slider3：

pauseTime: 15000,
recurPauseTime:15000

Answer 2

虽然从技术上讲，你可以在Nivo运行时“改变”暂停时间，但它会比看上去困难得多，因为它们没有为这种操作提供原生支持。

更直观的方法可能是检查每张新幻灯片是否在所需的快速幻灯片上。如果是这样，请等待2秒并推进幻灯片。

Nivo选项：

afterLoad: slideCheck(),
afterChange: slideCheck()

全球职能

function slideCheck(){
    if( $('#slider .nivo-control').eq(0).hasClass('active') ){
        setTimeout(function(){
            $('#slider').find('a.nivo-nextNav').click()
        },2000);
    }
}

编辑：事实证明，在第一张幻灯片中没有触发nivo的slideChange回调。所以我们需要挂两次。

Answer 3

你可能现在解决了你的问题，但我有同样的问题。在研究了所有选项后，我想出了一个简单的，我不说漂亮的解决方案。因为我正在使用的幻灯片使用“淡入淡出”效果，没有导航（键盘，暂停，方向控制等）我的解决方案是将第一张图像放在html中两次。这样，第一个图像显示的时间是其余图像的两倍，没有任何可见的符号，图像实际上被加载了两次。

同样，这不是一个性感的解决方案，但足够好用。

Answer 4

我遇到了类似的问题。我正在使用淡入淡出过渡，似乎animSpeed是除第一张幻灯片之外的所有幻灯片的pauseTime的一部分。所以，我有这些设置：

    effect: 'fade',
    animSpeed: 3000,
    pauseTime: 7000,

似乎第一张幻灯片显示7秒钟，然后所有后续幻灯片在淡入淡出效果开始前仅显示4秒钟。

我通过将超时设置为4000来尝试Sinetheta的解决方案，它确实使第一张幻灯片上的转换开始更快，但现在第二张幻灯片显示了很长时间。现在看起来在开始转换之前，第二张幻灯片显示为7000加上4000。

有没有人见过这个？任何解决方案？

谢谢，

Jerri

Answer 5

好的，我发现了一个非常不优雅的解决方案。我必须在afterLoad：function（）下面添加一个afterChange：function（）来设置所有后续幻灯片的转换。任何人都有更好的主意吗？

这是我的整个$（窗口）.load（function（）：

    $(window).load(function() {
        $('#slider').nivoSlider({
            effect: 'fade', 
            animSpeed: 3000, // Slide transition speed
            pauseTime: 7000, // How long each slide will show   
            pauseOnHover: false, // Stop animation while hovering
              /* directionNav and directionNavHide added so that 
                afterLoad: function below can find 'Next' link */
            directionNav: true, // Hide Next & Prev navigation
            directionNavHide: true, // Only show on hover
              /* prevText and nextText set to nothing so they don't show */
            prevText: '', // Prev directionNav text
            nextText: '', // Next directionNav text
            controlNav: false, // Hide 1,2,3... navigation
            randomStart: true, // Start on a random slide
              /* Below changes first slide display time */
            afterLoad: function(){
                setTimeout(function(){
                    $('#slider').find('a.nivo-nextNav').click()
                },4000);        
            },      
              /* Code above changes first slide duisplay time, but then second 
              slide display time is too long. Below code sets display time for 
              all subsequent slides. */
            afterChange: function(){
                setTimeout(function(){
                    $('#slider').find('a.nivo-nextNav').click()
                },4000);        
            }
        });
    });

谢谢，

Jerri

Answer 6

感谢Sinetheta，他指出了我正确的方向：

$(window).load(function() {
    $('#slider').nivoSlider({
        pauseTime:5000,
        pauseOnHover: false,
        controlNav:false,
        directionNav:true,
        directionNavHide:true,
        effect:'sliceDown',
        captionOpacity: 0.9,
        afterLoad: function(){
            setTimeout(function(){
                $('#slider').find('a.nivo-nextNav').click()
            },2000);        
        },
    });
});

Answer 7

我想更改每次点击活动的效果。

我找不到改变“settings”var的方法，所以我不得不修改原始脚本。

jquery.nivo.slider.js

            $(slider).on('click', 'a.nivo-prevNav', function(){
            settings.effect = "slideInLeft";
            if(vars.running) { return false; }
            clearInterval(timer);
            timer = '';
            vars.currentSlide -= 2;
            nivoRun(slider, kids, settings, 'prev');
        });

        $(slider).on('click', 'a.nivo-nextNav', function(){
            settings.effect = "slideInRight";
            if(vars.running) { return false; }
            clearInterval(timer);
            timer = '';
            nivoRun(slider, kids, settings, 'next');
        });

如果他们允许访问事件的“设置”var会有所帮助：beforeChange，afterChange ......

如何在运行时更改nivo滑块参数？

7 个答案: