5

有用！！！ http://jsfiddle.net/jupago/W6CkP/

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

我在这里创建了一个工作小提琴：jsfiddle.net/jupago/W6CkP

这应该可以更容易地理解这个问题。我仍然附上小提琴之前的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 尼沃：

    $('#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
});
4

3 回答 3

1

我没有尝试过，所以我不能保证它会起作用，但您可以尝试的其中一件事是实际上将 设置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;
},
...

重要提示：您实际上应该将....currentSlide == 0)上面示例中的 替换为 Nivo SliderstartSlide选项的访问器，特别是如果您打算更改滑块的起始索引。我不记得访问器是什么，但我会想象它看起来像：

....currentSlide == settings.startSlide)

settingsNivo 使用的设置变量的名称在哪里。


更新

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

于 2013-04-12T18:26:09.920 回答
0

我已经做到了并且工作正常：

在您的 HTML 页面更改中：

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

经过

$( document ).ready(function() {
    $('#slider').nivoSlider({...
于 2013-10-21T10:55:29.033 回答
0

你可以尝试这样的事情：

 $(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;
        }
    },
    //...
    });
});

编辑：我不知道 settimeout 是否真的有必要，也许只return 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;
        }
    },
    //...
    });
});
于 2013-04-12T18:22:53.837 回答