Question

从另一个选项卡返回时，主页上的幻灯片显示速度太快。我尝试了该站点的其他一些解决方案，但对我而言不起作用。希望有人能真正帮助您。非常感谢。

这是Javascript：

Blockquote

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

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

   }, 5000);

Blockquote

HTML代码：

Blockquote

    <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>

Blockquote

Blockquote

     /*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;

}

Blockquote

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/

从另一个标签返回时，幻灯片放映速度太快

1 个答案: