jquery rotazione delle immagini

Question

Ho il seguente script rotatore banner jQuery e mi piacerebbe cambiare un po 'in modo che i banner ruotano ogni X secondi anche se l'utente doensn't click sui pulsanti PREV / NEXT. Il codice attuale è qui:

<script type="text/javascript">

    var active_banner_index = 0;

    function banner_next(direction) {
        var banners = $(".banner-content");
        if( banners.length ) {
            var curr = $(banners[active_banner_index]);
            active_banner_index+=direction;
            if( active_banner_index>=banners.length )
                active_banner_index = 0;
            if( active_banner_index<0 )
                active_banner_index = banners.length-1;
            next = $(banners[active_banner_index]);
            curr.fadeOut(1000, 
                function() {
                    next.fadeIn(500);
                }
                );
        }       
    }

    $(document).ready(function() {
        var tbl = $("#mega-hot-deal-666");
        var tag_left = $("#hot-deal-arrow-left");
        var tag_right = $("#hot-deal-arrow-right");

        var banners = $(".banner-content");
        if( banners.length ) {
            $(banners[0]).show();
        }

        pos = tbl.position();
        tag_left.css('z-index',100);
        tag_left.css({ 
                            position: "absolute",
                top: pos.top+67, left: pos.left-37,
                cursor: "pointer"
            });
        tag_right.css('z-index',6);
        tag_right.css({ 
                            position: "absolute",
                top: pos.top+67, left: pos.left+tbl.width()-26,
                cursor: "pointer" 
            });
    active_banner_index = 0;
        tag_left.click( function(){ banner_next(-1); } );
        tag_right.click( function(){ banner_next(1); } );
    });

</script>

Che codice avrebbe devo aggiungere al fine di rendere i banner ruotano da soli, senza aspettare che l'utente a cliccare sui pulsanti?

Answer 1

È necessario utilizzare setInterval chiamare periodicamente la funzione di avanzamento. Si consiglia inoltre di mettere in pausa quando l'utente si libra sopra il banner. Ecco il codice si avrebbe bisogno:

$(function(){
    var delay = 4000,
        int;

    // Set interval to progress
    int = setInterval(function(){
        banner_next(1);
    }, delay);

    // OPTIONAL: Pause when hovering over the banner
    $(".banner-content").hover(function(){
        clearInterval(int);
    }, function(){
        int = setInterval(function(){
            banner_next(1);
        }, delay);
    });
});

Riferimento per l'apprendimento: window.setInterval e window.clearInterval