由于有可变宽度的图像,我正在使用Lemmon Juice滑块,它运行良好,只是我无法自动播放。它移动一个图像,然后停止——这是在使用'slideToLast' :
true或'infinite' : true
时发生的。手动控制按预期工作。我有没有错过什么东西可以让这个旋转木马无限自动播放,而不仅仅是在移动一张幻灯片后停止?
html:
<div id="slider1" class="slider">
<ul>
<li>
<img src="http://domain.com/slide/image1.jpg"/>
<span class="caption">
some caption here
</span>
</li>
<li>
<img src="http://domain.com/slide/image2.jpg"/>
<span class="caption">
2nd caption here
</span>
</li>
<li>
<img src="http://domain.com/slide/image3.jpg"/>
<span class="caption">
3rd caption here
</span>
</li>
</ul>
</div>
JS:
// home page slider
var sliderTimeout;
window.onload = function(){
$( '#slider1' ).lemmonSlider({
'infinite' : true
/*'slideToLast' : true*/
});
// run
sliderAutoplay();
}
// slider autoplay function
function sliderAutoplay(){
$( '#slider1' ).trigger( 'nextSlide' );
sliderTimeout = setTimeout( 'sliderAutoplay', 1500 );
}
// pause slider function
function sliderPause(){
clearTimeout( sliderTimeout );
}
又喝了一杯咖啡后找到了解决方案。事实证明,那一页上的文档并非100%准确。我做了一个视图源,看看自动播放滑块是如何实际工作的。
对我来说,正在工作的jQuery是:
window.onload = function(){
// home page slider
$( '#slider1' ).lemmonSlider({ infinite: true });
sliderAutoplay();
$( '#slider3-play' ).click(function(){
if ( sliderTimeout == null ){
sliderAutoplay();
}
return false;
});
// this part in original page, but I don't really need it
$( '#slider3-pause' ).click(function(){
clearTimeout( sliderTimeout );
sliderTimeout = null;
return false;
});
}
// autoplay
var sliderTimeout = null;
function sliderAutoplay(){
$( '#slider1' ).trigger( 'nextSlide' );
sliderTimeout = setTimeout( 'sliderAutoplay()', 3500 );
}
希望这对将来的某个人有所帮助。