jQuery画像回転子

Question

次のJQuery Banner Rotator Scriptがあり、ユーザーがPrev/Nextボタンをクリックしない場合でも、バナーがx秒ごとに回転するように少し変更したいと思います。現在のコードはこちらです：

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

ユーザーがボタンをクリックするのを待つことなく、バナーを自分で回転させるために、どのコードを追加する必要がありますか？

Answer 1

使用する必要があります setInterval 定期的に進行状況関数を呼び出します。また、ユーザーがバナーの上に浮かんだときに一時停止することもできます。これが必要なコードです。

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

学習のための参照： window.setInterval と Window.ClearInterval