jquery之Nivo slider 仅延迟第一张图像_编程设计

我能够让它停在第一张图片上。

这是我的代码。我停止动画两次，因为我希望它在幻灯片结束后也停止:

$(window).load(function() { 
    $('#slider').nivoSlider({ 
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
    animSpeed: 500, // Slide transition speed 
    pauseTime: 5000, 
    startSlide: 0, // Set starting Slide (0 index) 
    directionNav: true,  // Next & Prev navigation 
    controlNav: false, // 1,2,3... navigation 
    controlNavThumbs: false, // Use thumbnails for Control Nav 
    pauseOnHover: false, // Stop animation while hovering 
    manualAdvance: false, // Force manual transitions 
    prevText: 'previous', // Prev directionNav text 
    nextText: 'next', // Next directionNav text 
    randomStart: false, // Start on a random slide 
    slideshowEnd: function(){            
          $('#slider').data('nivoslider').stop(); 
    setTimeout("$('#slider').data('nivoslider').start()",10000); 
        }, // Triggers when last slide is shown 
    }); 
 
    $('#slider').data('nivoslider').stop(); 
    setTimeout("$('#slider').data('nivoslider').start()",10000); 
 });

<小时 />

原帖在这里:

我正在使用 NIVO slider 插件，虽然我让它顺利工作，但我需要第一个图像比其他图像持续时间更长(第一个图像中有文本)。

我在这里创建了一个工作 fiddle :jsfiddle.net/jupago/W6CkP

这应该会让我们更容易理解这个问题。我仍然附上之前 fiddle 中的html代码以供引用:

HTML:

<div class="slider-wrapper"> 
    <div id="slider" class="nivoSlider"> 
<img src="http://goo.gl/I4c65" /> 
<img src="http://goo.gl/acxBF"/> 
<img src="http://goo.gl/GBzYF"/> 
<img src="http://goo.gl/BC2EA" /> 
<img src="http://goo.gl/9Sd69" /> 
<img src="http://goo.gl/qOaZl"/> 
<img src="http://goo.gl/btswq" /> 
    </div> 
</div>

JS NIVO:

    $('#slider').nivoSlider({ 
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
    animSpeed: 500, // Slide transition speed 
    pauseTime: 5000, // How long each slide will show 
    startSlide: 0, // Set starting Slide (0 index) 
    directionNav: true,  // Next & Prev navigation 
    controlNav: false, // 1,2,3... navigation 
    controlNavThumbs: false, // Use thumbnails for Control Nav 
    pauseOnHover: false, // Stop animation while hovering 
    manualAdvance: false, // Force manual transitions 
    prevText: 'next', // Prev directionNav text 
    nextText: 'previous;', // Next directionNav text 
    randomStart: false, // Start on a random slide 
    beforeChange: function(){}, // Triggers before a slide transition 
    afterChange: function(){}, // Triggers after a slide transition 
    slideshowEnd: function(){}, // Triggers after all slides have been shown 
    lastSlide: function(){}, // Triggers when last slide is shown 
    afterLoad: function(){} // Triggers when slider has loaded 
});

请您参考如下方法:

我还没有尝试过这个，所以我不能保证它会起作用，但你可以尝试的事情之一实际上是设置 pauseTime为函数而不是常量，5000 。您将确定您所在的图像，然后，如果它是所需的图像，则将时间设置为类似 8000 的值。，否则您可以将其设置为 5000 。

重申一下:我没有测试过这个，也不能保证它会起作用。但是，如果确实如此，它将为您提供大量额外的灵 active 。

如果您想尝试实现此功能，则可以使用以下代码:

... 
pauseTime: function() { 
    if ($("#slider").data("nivo:vars").currentSlide == 0) { 
        return 8000; 
    } 
    return 5000; 
}, 
...

或者，如果这在 pauseTime 中不起作用，然后我会尝试将几乎相同的东西放入其他 beforeChange 中选项，如下所示:

... 
beforeChange: function() { 
    if ($("#slider").data("nivo:vars").currentSlide == 0) { 
        $("#slider").delay(3000); 
    } 
    return; 
}, 
...

重要提示:您实际上应该替换 ....currentSlide == 0)在上面的示例中，使用 Nivo Slider 的访问器 startSlide选项，特别是如果您打算更改 slider 的起始索引。我不记得访问器是什么，但我想象它看起来像这样:

....currentSlide == settings.startSlide)

哪里settings是 Nivo 使用的设置变量的名称。

更新

根据您在评论中提到的错误，我的下一个建议是您再次尝试相同的两个解决方案，但这次替换 setting.startSlide与 0 。如果这不起作用(尽管应该起作用)，那么我们需要回到绘图板。如果有效，请尝试替换 0与 this.startSlide 。让我知道结果如何。