问题
I'm working with tinycarousel jquery plugin for an image slider, I would like to pause automatically at reaching the last of the slides, I'm totally new to jquery or javascript It would be great if you can help me to achieve this functionality guys. Thanks in advance.
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>
回答1:
You could stop the carousel from a callback function. In the above example, you could do:
$('#slider-main').tinycarousel({
callback: function(element, index){
if (index == 4) {
$('#slider-main').tinycarousel_stop();
}
}
});
来源:https://stackoverflow.com/questions/16926939/tiny-carousel-plugin-autostop-at-last-slide