IT工作!!! http://jsfiddle.net/jupago/W6CkP/
基于此主题:Pause 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滑块插件,当我让它顺利工作时,我需要第一张图片比其余图片更长(第一张图片中有文字)。
我在这里创造了一个工作小提琴: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 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
});
答案 0 :(得分: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;
},
...
重要提示:您实际上应该使用Nivo Slider ....currentSlide == 0)
选项的访问者替换上面示例中的startSlide
,尤其是如果您打算更改开始时滑块的索引。我不记得访问者是什么,但我会想象它看起来像:
....currentSlide == settings.startSlide)
其中settings
是Nivo使用的设置变量的名称。
<强>更新强>
根据您在评论中提到的错误,我的下一个建议是您再次尝试相同的两个解决方案,但这次将setting.startSlide
替换为0
。如果这不起作用(尽管它应该),那么我们需要回到绘图板。如果确实有效,请尝试将0
替换为this.startSlide
。让我知道这是如何工作的。
答案 1 :(得分: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;
}
},
//...
});
});
答案 2 :(得分:0)
我做到了这一点并且工作正常:
在您的HTML页面中更改:
$(window).load(function() {
$('#slider').nivoSlider({...
通过
$( document ).ready(function() {
$('#slider').nivoSlider({...