如果您不选择幻灯片，幻灯片将变得疯狂 [英] slideshow goes crazy if you tab away

问题描述

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

I have made a simple slideshow.. It works like it should exepct when you tab away and leave the window and tabs back after a while.. Then the slideshow goes crazy like it has stood still and it needs to to keep up with the slides or rolls while the window was in the background.. The slides comes consecutive and after a while goes back to normal

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>

推荐答案

我也有这个问题.我通过在窗口模糊时停止幻灯片放映并重新开始聚焦来解决它:

I had this problem too a while ago. I solved it by stopping the slideshow on window blur and restarting it on focus:

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

这篇关于如果您不选择幻灯片，幻灯片将变得疯狂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！