javascript - 每当我返回窗口时，我的 setInterval 方法都会出现问题

Question

我正在使用 setInterval 方法为当前网站项目创建横幅幻灯片。

横幅似乎工作正常。 jquery 转换看起来足够平滑，但我发现当我转到另一个窗口选项卡并在几分钟后返回网站窗口时，幻灯片有点中断它的流动，并且在不应该的时候开始淡出，图像在淡出完成之前开始加载等。

这是浏览器的问题吗？还是与我使用延迟方法有关？或者其他我无法发现的东西？

我的代码如下。非常感谢您花时间回复。

HTML:

<section id="banner">

<div class="row">
<div class="col-md-12">

<img src="banner1.jpeg" class="img-responsive center-block banner-img">

</div>
</div>

</section>

JavaScript/JQUERY:

$(document).ready(function(){

var bannerImages = [
"banner1.jpeg",
"banner2.jpg",
"banner3.png"
];

var currentImage = 0;

$(".banner-img").fadeIn(500).delay(5000).fadeOut();

// CHANGE THE BANNER IMAGE EVERY FEW SECONDS
setInterval(function(){
if (currentImage > bannerImages.length-1){
currentImage = 0;
}

$(".banner-img").fadeIn().attr("src",bannerImages[currentImage]).delay(5000).fadeOut();
currentImage++;
}, 6000)

})

Answer 1

尝试在 setInterval 函数中淡出图像，然后淡入新图像，而不是设置淡出延迟。