我正在使用tinycarousel jquery插件获取图像滑块,我想在到达最后一张幻灯片时自动暂停,我对jquery或javascript完全不熟悉如果你可以帮助我实现它会很棒这个功能家伙。提前谢谢。
HTML:
<div id="slider-main">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/image1.jpg" /></li>
<li><img src="images/image2.jpg" /></li>
<li><img src="images/image3.jpg /></li>
<li><img src="images/image4.jpg" /></li>
<li><img src="images/image5.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
<ul class="pager">
<li><a rel="0" class="pagenum" href="#">1</a></li>
<li><a rel="1" class="pagenum" href="#">2</a></li>
<li><a rel="2" class="pagenum" href="#">3</a></li>
<li><a rel="3" class="pagenum" href="#">4</a></li>
<li><a rel="4" class="pagenum" href="#">5</a></li>
</ul>
</div>
JSCRIPT
<script type="text/javascript" src="lib/js/iepngfix_tilebg.js"></script>
<script type="text/javascript" src="lib/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider-main').tinycarousel({ pager: true, interval: true, intervaltime: 1000, duration:500 });
$('#slider-products').tinycarousel({ display: 3 });
$('#slider-main').tinycarousel({
callback: function(element, index){
if (index == 4) {
$('#slider-main').tinycarousel_stop();
}
}
});
});
</script>
答案 0 :(得分:0)
您可以从回调函数中停止轮播。在上面的示例中,您可以执行以下操作:
$('#slider-main').tinycarousel({
callback: function(element, index){
if (index == 4) {
$('#slider-main').tinycarousel_stop();
}
}
});