jquery：幻灯片显示,当你在另一个浏览器选项卡中,然后返回带有幻灯片的选项卡,它会翻转

2019年8月3日 205次阅读

http://jsfiddle.net/nicktheandroid/B7Rhe/8/

在Chrome中,当浏览器标签处于非活动状态时,Chrome会将任何setInterval减慢到每秒一次,即使我的幻灯片每两秒播放一次,它仍然会搞乱.

转到上面的页面,看看那里有幻灯片,现在点击浏览器窗口中的另一个标签,在那里停留15秒左右,然后点击返回带有幻灯片的标签,幻灯片将尝试快速淡入和每张幻灯片都被抓住了.但后来我看了这些简单的幻灯片,并没有发生在他们身上：

http://jonraasch.com/blog/a-simple-jquery-slideshow

然后在Jonathan Snook的小幻灯片中它像我一样混乱,但插件是由他的脚本组成的,插件示例不会搞砸……？

1(搞砸了)Jonathan Snook的剧本：
http://snook.ca/technical/fade/fade.html

2(不搞乱)上面的插件：
http://mathiasbynens.be/demo/slideshow

问题：为什么我的混乱,乔纳森斯诺克斯陷入困境,当他的插件版本没有,而Jon Raasch的幻灯片也不会搞砸？

我发现了其他一些与此有关的SO问题,但他们没有我需要的答案. ere是jquery,仅供SO参考：

var x = 2;
console.log('Not broken');
$('.slideshow li:gt(0)').css({opacity:0});

setInterval(function() {
    var m = $('.slideshow li').size();
    x += 1;
    if (x > m) {
        x = 1;
    }
    $(".slideshow ul li:visible").animate({
        opacity: 0
    });
    $(".slideshow ul li:nth-child(" + (x) + ")").animate({
        opacity: 1
    });
}, 2000);

最佳答案 在调查和测试您的示例链接,工作和非工作…我看到Chrome中正常工作的链接,实际上是使用jquery-1.3.2.看起来它在使用旧的Jquery框架的Chrome中运行良好.

请参阅更新链接：http://jsfiddle.net/B7Rhe/10/

点赞