Tiny Carousel插件，在最后一张幻灯片上自动停止 [英] Tiny Carousel plugin, autostop at last slide

问题描述

我正在为图像滑块使用tinycarousel jquery插件，我想在到达幻灯片的最后一张时自动暂停，我对jquery或javascript完全陌生，如果可以帮助我实现这个功能的家伙.预先感谢.

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>

推荐答案

您可以通过回调函数停止轮播.在上面的示例中，您可以执行以下操作:

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();
        }
    }
});

这篇关于Tiny Carousel插件，在最后一张幻灯片上自动停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！