rotateur d'image jquery

Question

Je le script rotateur de bannière jQuery suivante et je voudrais changer un peu pour que les bannières tournent toutes les X secondes, même si le doensn't utilisateur clique sur les boutons préc / suivant. Le code actuel est ici:

<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>

Quel code aurais-je ajouter pour que les bannières tournent par eux-mêmes, sans attendre l'utilisateur de cliquer sur les boutons?

Answer 1

Vous devez utiliser setInterval pour appeler périodiquement la fonction de progression. Vous pouvez également mettre en pause lorsque passe la souris dessus sur la bannière. Voici le code que vous devez:

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

Référence pour l'apprentissage: window.setInterval et window.clearInterval