jquery - 如果你按 Tab 键离开，幻灯片就会变得疯狂

Question

我制作了一个简单的幻灯片..它的工作原理应该是这样的，当您离开窗口并在一段时间后离开窗口和选项卡时..然后幻灯片就会变得疯狂，就像它静止不动一样，它需要跟上当窗口在后台时，幻灯片或滚动。幻灯片连续出现，一段时间后恢复正常

脚本:

function Slideshow(){
    var _this = this;

    this.i = 0;
    this.num = 0;

    this.slide = null;
    this.slide_txt_bg = null;
    this.opacity_hover = 0.95;
    this.opacity_hout = 0.5;
    this.opacity_txt_out = 0;
    this.opacity_txt_in = 0.6;
    this.width = 340;
    this.time = 18;
    this.time_clicked = 25;
    this.interval = null;

    this.btn_next = null;
    this.btn_prev = null;

    this.clicked = false;

    this.cnstr = function(){
        this.slide = $('#slideshow_film').detach();
        this.slide_txt_bg = $('#slideshow_txt_bg').css('opacity', this.opacity_txt_in);

        var slideshow = $('#slideshow');
        if(slideshow.length > 0){
            if(this.slide.length > 0){
                var slideshow_inner = $('#slideshow_inner').append(this.slide);
                this.num = this.slide.find('tr')[0].cells.length;

                this.slide.css('width', (this.num * 100)+'%');
                var controls = $('<div class="slideshow_controls"></div>').prependTo(slideshow);
                this.btn_prev = $('<div class="btn_slideshow btn_slideshow_prev"></div>').appendTo(controls)
                    .bind('click', {
                        mode : -1
                    }, this.btn_click)
                    .css('opacity', this.opacity_hout)
                    .mouseover(this.btn_hover)
                    .mouseout(this.btn_hout);
                this.btn_next = $('<div class="btn_slideshow btn_slideshow_next"></div>').appendTo(controls)
                    .bind('click', {
                        mode : 1
                    }, this.btn_click)
                    .css('opacity', this.opacity_hout)
                    .mouseover(this.btn_hover)
                    .mouseout(this.btn_hout);

                this.auto_roll();
            }
            else{
                slideshow.remove();
            }
        }
    };

    this.auto_roll = function(){
        if(this.interval){
            clearInterval(this.interval);
            this.interval = null;
        }
        var time = (this.clicked ? this.time_clicked:this.time) * 1000;
        this.interval = setInterval(function(){
            _this.btn_next.click();
        }, time);
    };

    this.btn_click = function(e){
        _this.txt_bg_out();

        if(e.which){
            _this.clicked = true;
        }
        _this.auto_roll();

        _this.i += e.data.mode;
        if(_this.i < 0){
            _this.i = _this.num - 1;
        }
        else if(_this.i > _this.num - 1){
            _this.i = 0;
        }

        var value = _this.i * _this.width * -1;
        _this.slide.animate({
            left : value+'px'
        }, 800, _this.txt_bg_in);
    };

    this.txt_bg_in = function(){
        _this.slide_txt_bg.delay(500).fadeTo(700, _this.opacity_txt_in);
    };

    this.txt_bg_out = function(){
        _this.slide_txt_bg.fadeTo(300, _this.opacity_txt_out);
    };

    this.btn_hover = function(){
        $(this).fadeTo(300, _this.opacity_hover);
    };

    this.btn_hout = function(){
        $(this).fadeTo(300, _this.opacity_hout);
    };
}

代码:

<div id="slideshow">
    <div id="slideshow_inner">
        <div id="slideshow_txt_bg"></div>
    </div>
</div>

<table id="slideshow_film">
    <tr>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.email.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.bank.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.alert.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.folders.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
    </tr>
</table>

Answer 1

我前段时间也遇到过这个问题。我通过在窗口模糊时停止幻灯片放映并在焦点上重新启动幻灯片来解决这个问题:

jQuery(window).blur(function() {
  // Stop slideshow
}).focus(function() {
  // Restart slideshow
});