Question

我正在尝试构建一个全尺寸的背景滑块，当标签/窗口处于非活动状态时停止播放，并在焦点处于焦点时继续播放。

问题是Chrome和Safari在加载/刷新页面时都没有做任何事情 - 您必须单击 - 然后在窗口内部才能启动动画。

有什么方法可以避免这种情况吗？

到目前为止，这是我的代码：

$(window).load( function(){ 
    var autopager;

    function startAutopager() {
        autopager = window.setInterval("slideSwitch()", 5000);
    }

    function stopAutopager() {
        window.clearInterval(autopager);
    }

    window.addEventListener('focus', startAutopager);   
    window.addEventListener('blur', stopAutopager);

    slideSwitch();
    $("#sliderContent img").fullBg();
});

这会启动两个浏览器的动画，但当我再次单击窗口外时，它将不会停止：

if(true == $.browser.safari || true == $.browser.chrome) {
    startAutopager();
}

希望有人可以提供帮助。

干杯！

Answer 1

试试这个并在评论中告诉我它是怎么回事。：）

$(function(){
  $("#sliderContent img").fullBg();

  var autopager;
  function startAutopager() {
    if (autopager) window.clearInterval(autopager);
    autopager = window.setInterval("slideSwitch()", 5000);
  }
  function stopAutopager() {
    window.clearInterval(autopager);
  }
  window.focus(startAutopager);   
  window.blur(stopAutopager);
  startAutopager()
});

在Chrome和Safari中执行焦点功能

1 个答案: