jQuery-将焦点放在另一个Chrome标签上后，图像旋转速度更快 [英] jQuery - Image rotation gets faster when focused after the focus was on another Chrome Tab

问题描述

当焦点位于该页面上时，我的图像旋转效果很好(我正在使用Google Chrome).但是，当我打开另一个选项卡并查看其他页面时，当我返回页面(单击已加载页面的选项卡)时，图像旋转速度很快！

My image rotation works fine when the focus is on that page(I am using Google Chrome). But when I open another tab and view some other page, and when I return back to my page(clicks on the tab that has my page loaded), the image rotation is somewhat speedy !

我使用fadeIn()和fadeOut()来显示和隐藏图像.同样，用于此目的的代码包含在另一个函数中，该函数使用$(document).ready()上的setTimeout()启动，并且函数的末尾也使用了setTimeout()(我之前提到的函数).

I use fadeIn() and fadeOut() to show and hide images. Also, the code for this is enclosed in another function which is initiated using setTimeout() on $(document).ready() and a setTimeout() is used in the end of the function too (the function that I mentioned previously).

如何解决这个问题?

编辑

使用的代码:

    var initialFadeIn = 1000;
    var itemInterval = 5000;
    var fadeTime = 2500;
    var numberOfItems = 0;
    var currentItem = 0;

    $(document).ready(function() {

        numberOfItems = $('.banner-img').length;
        $('.banner-img').eq(currentItem).fadeIn(initialFadeIn);

        var imgTitle = $('.banner-img').eq(currentItem).attr('title');
        $('.banner-title').text(imgTitle);

        setTimeout(imgLoop, itemInterval);

    });

    function imgLoop()
    {
        $('.banner-img').eq(currentItem).fadeOut(fadeTime);

        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.banner-img').eq(currentItem).fadeIn(fadeTime);

        imgTitle = $('.banner-img').eq(currentItem).attr('title');
        $('.banner-title').text(imgTitle);

        setTimeout(imgLoop, itemInterval);
    }

推荐答案

解决方案:

按照turzifer的建议，我使用了循环插件: http://jquery.malsup.com/cycle/

As turzifer suggested, I used cycle plugin: http://jquery.malsup.com/cycle/

要在图片上方显示字幕，我使用了:

And to display captions above the image, I used:

<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    before:     function() {
        $('#caption').html(this.alt);
    }
});
});
</script>

如本例所示: http://jquery.malsup.com/cycle/caption.html (查看页面源代码)

Like in this example: http://jquery.malsup.com/cycle/caption.html (view page source to see the code)

这篇关于jQuery-将焦点放在另一个Chrome标签上后，图像旋转速度更快的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！