Jquery Nivo滑块仅延迟第一个图像

它工作！！！

基于此线程：

我能在第一张图片上画出它停下来

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

$(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滑块插件，虽然我让它顺利工作，但我需要第一张图像比其他图像持续时间更长（第一张图像中有文本）

我在这里创作了一把小提琴：

这将使我们更容易理解这个问题。 我之前还在附加fiddle的html代码以供参考：

HTML:

---

您可以尝试以下方法：

 $(window).load(function() {
   var waited = false;
   $('#slider').nivoSlider({
    //...
    beforeChange: function(){
        if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide
            //wait a little longer
            $('#slider').data('nivoslider').stop();
            setTimeout(function(){
                 waited = true;
                 $('#slider').data('nivoslider').start();
            }, 2000); //2 seconds
        } else {
            waited = false;
        }
    },
    //...
    });
});

编辑：我不知道设置超时是否真的有必要，也许只有

返回false

可以

 $(window).load(function() {
   var waited = false;
   $('#slider').nivoSlider({
    //...
    beforeChange: function(){
        if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide
            //wait a little longer
            return false;
        } else {
            waited = false;
        }
    },
    //...
    });
});

---

我没有尝试过这个，所以我不能保证它会起作用，但您可以尝试的一个方法是将

pauseTime

设置为函数，而不是常量，

5000

。您可以确定您正在使用的图像，然后，如果它是所需的图像，您可以将时间设置为类似于

8000

，否则您可以将其设置为

5000

我只是重申：我没有测试过这一点，也不能保证它会起作用。然而，如果它真的这样做了，它将为您提供大量额外的灵活性

如果您想尝试实现此功能，请使用以下代码：

...
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;
},
...

重要注意事项：您应该实际使用Nivo滑块的

开始滑动

选项的访问器替换上述示例中的

…currentSlide==0）

，尤其是如果您计划更改滑块的开始索引。我不记得访问器是什么，但我会想象它看起来像：

....currentSlide == settings.startSlide)

其中

settings

是Nivo使用的设置变量的名称

更新

---

基于您在评论中提到的错误，我的下一个建议是您再次尝试相同的两种解决方案，但这次将

设置.startSlide

替换为

0

。如果这不起作用（尽管它应该起作用），那么我们需要回到绘图板上。如果确实有效，请尝试将

0

替换为

this.startSlide

。让我知道这是如何实现的。

我已经做到了，而且效果很好：

在HTML页面更改中：

$(window).load(function() {  
     $('#slider').nivoSlider({...

借

---

在SETTIMEOUT函数的第二行检查两个语法错误（虽然第二行只是一个半冒号，因此在技术上是可以的）这个解决方案可能会起作用，但我总是认为SETIMEOUT是PIS Alror感谢Philippe Boissonneault！我差点就成功了。奇怪的是，这段代码是第二个延迟的图像，而不是第一个。由于startSlide已设置为0，我不知道它是否是解决方案，但请不要使用settimeout，只尝试

返回false

（请参见编辑）谢谢@Philippe Boissonneault，但是我应该在哪里设置第二个选项的延迟时间呢？谢谢@Zachary Kniebel这似乎是最简单的版本，但我似乎无法让它工作。正在尝试将文件上载到临时文件夹，以查看这是否有帮助。我尝试过使用settings.startSlide，因为我相信Nivo使用的是这个变量，但出现了一系列错误，不客气。变量名为

settings

是正确的。你能把更新后的代码和错误添加到你的帖子中吗。谢谢：）非常感谢@Zachary Kniebel，当我尝试将pauseTime设置为一个函数时，它会疯狂地转个不停。当我插入你的第二个访问器示例时，chorme告诉我：未捕获引用错误：设置未定义我在我的帖子中添加了一个更新，为你提供了一些建议。让我知道会发生什么。谢谢@Zachary Kniebel，还没有运气。创造了一把小提琴。希望这有帮助。非常感谢

....currentSlide == settings.startSlide)

$(window).load(function() {  
     $('#slider').nivoSlider({...

$( document ).ready(function() {
    $('#slider').nivoSlider({...