вращатель изображения jquery - PullRequest
Новая
       8

вращатель изображения jquery

1 голос
/ 19 октября 2011

У меня есть следующий скрипт ротатора баннера jQuery, и я бы хотел немного его изменить, чтобы баннеры вращались каждые 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>

Какой код мне нужно добавить, чтобы баннеры вращались сами по себе, не дожидаясь, пока пользователь нажмет на кнопки?

1 Ответ

2 голосов
/ 19 октября 2011

Вам необходимо использовать 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

...