如果你离开，幻灯片会变得疯狂

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