2

所以我的页面上有一个 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})}被调​​用，但我尝试更改初始设置失败 - 它只会破坏动画（从一张幻灯片翻转到下一张没有动画）并且不会改变暂停时间。

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

4

7 回答 7

2

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

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

这使我可以像这样设置它：

滑块1：

pauseTime: 5000,
recurPauseTime:15000

滑块2：

pauseTime: 10000,
recurPauseTime:15000

滑块3：

pauseTime: 15000,
recurPauseTime:15000
于 2012-09-26T18:11:23.163 回答
1

尽管从技术上讲，您“可以”在 Nivo 运行时更改 pauseTime，但这比看起来要困难得多，因为他们没有为这种操作提供本机支持。

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

尼沃选项：

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 回调没有在第一张幻灯片上触发。所以我们需要钩入两次。

于 2011-11-24T23:50:19.177 回答
1

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

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

于 2012-01-04T09:24:45.373 回答
1

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

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

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

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

有没有其他人看过这个？有什么解决办法吗？

谢谢，

杰里

于 2012-08-08T22:18:09.780 回答
1

好的，我找到了一个非常不雅的解决方案。我必须在 afterLoad: function() 下面添加一个 afterChange: function() 来设置所有后续幻灯片的过渡。有人有更好的主意吗？

这是我的整个 $(window).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);        
            }
        });
    });

谢谢，

杰里

于 2012-08-08T22:41:09.697 回答
0

感谢 Sintheta，他在这里为我指明了正确的方向：

$(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);        
        },
    });
});
于 2011-11-25T00:06:29.640 回答
0

我想改变每个点击事件的效果。

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

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

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

于 2013-03-07T17:23:20.987 回答