从另一个选项卡返回时幻灯片太快

Question

从另一个选项卡返回时，主页上的幻灯片太快。我尝试了该站点的其他一些解决方案，但在我的情况下不起作用。希望有人能真正提供帮助。非常感谢。

这里是 Javascript：

块引用

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() {
    $('#slideshow > div:first')
   .fadeOut(1000)
   .next()
   .fadeIn(1000)
   .end()
   .appendTo('#slideshow');

   }, 5000);

块引用

HTML 代码：

块引用

    <div id="slideshow">
    <div>
        <img src="abc.png">
    </div>
    <div>
        <img src="def.png">
    </div>
    <div>
        <img src="ghi.png">
    </div>
    <div>
        <img src="jkl.png">
        </div>
    </div>

块引用

块引用

     /*Slideshow */
     #slideshow > div {
     width: 970px;
     height: 500px;
     display: block;
     float: left;
     position: absolute;
     top: 200px;
     right: auto;
     background-repeat: no-repeat;
     margin-left: 15px;
     line-height: 180px;

}

块引用

Answer 1

如果太快，只需将时间增加到fadeOut() 和fadeIn()。使用$(window).focus() 和$(window).blur() 检查用户何时离开选项卡并清除幻灯片间隔。当用户回来时，再次设置间隔。

 $("#slideshow > div:gt(0)").hide();

    var slideshow = setInterval(function() {
      beginSlideshow();
    }, 5000);
    function beginSlideshow(){
      $('#slideshow > div:first')
    .fadeOut(2000)//time doubled from 1000 to 2000 milliseconds
    .next()
    .fadeIn(2000)//time doubled from 1000 to 2000 milliseconds
    .end()
    .appendTo('#slideshow');
    }
   $(window).focus(function() {
     if (slideshow==null){
       //Use came back to the tab
      slideshow = setInterval(function(){
       beginSlideshow();
      }, 5000);
     }
   });

 $(window).blur(function() {
   //User left tab
   clearInterval(slideshow);
   slideshow = null;
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
    <div>
        <img src="test9/SitePage_9dArip.png">
    </div>
    <div>
        <img src="test9/SitePage_9dCand.png">
    </div>
    <div>
        <img src="test9/SitePage_9dfinalOK.png">
    </div>
    <div>
        <img src="test9/SitePage_9dPrav.png">
        </div>
    </div>

JSFiddle：http://jsfiddle.net/1vk3fqr8/3/