jquery - 轮播/选取框在 Firefox 和 Chrome 中在另一个页面/选项卡上后疯狂滚动

Question

我有一个图像和标题的滚动轮播，它们单独交互但相互协调。当我在 IE、Firefox 和 Chrome 的页面/选项卡上时，一切都运行良好。然而，在 FF 和 Chrome 中，一旦我进入另一个选项卡或浏览器一段时间，轮播就会与我离开该页面的时间成比例地大幅滚动。

就好像它跟上了计时器，但不会推进轮播，直到我返回页面，然后 try catch 它应该在的位置，即使这是 10 多个循环。

显然，这并不理想，因此我们将不胜感激。以下是该页面的链接:http://www.dillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/home_test_fader.htm

这是我的 html:

    <div class="marquee_container autoplay">    
        <div class="marquee_photos"></div>
        <div class="marquee_caption">
            <div class="marquee_caption_content"></div>
        </div>
        <div class="marquee_nav"></div>
    </div>

    <div class="marquee_panels">
        <div class="marquee_panel">
            <img src="customer/disupp/images/fader/NewWebsiteRotator.jpg" class="marquee_panel_photo" alt="New Website" width="731" height="310" />
            <div class="marquee_panel_caption">
                <h2>LONDON</h2>
                <p>This is a test caption for San Diego.<br />This is a test caption for San Diego.</p>
                <p><a href="#">Check it out!</a></p>
            </div>
        </div>
        <div class="marquee_panel">
            <img src="customer/disupp/images/fader/1DaySale-DeWaltProto.gif" class="marquee_panel_photo" alt="DeWalt and Proto 1-Day Only Sale" width="731" />
            <div class="marquee_panel_caption">
                <h2>Up to 60% Off DeWalt and Proto Tool Sets</h2>
                <p>Mark you calendars for Thursday, December 15<sup>th</sup>. Don't miss out on your last chance this year to save big on the DeWalt and Stanley Proto tool sets you've been wanting.</p>
                <p><a href="customer/disupp/promo_files/DeWalt-Proto_Telesales.pdf" onClick="window.open('customer/disupp/promo_files/DeWalt-Proto_Telesales.pdf','popup','scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no'); return false">Check it out!</a></p>
            </div>
        </div>
        <div class="marquee_panel">
            <img src="customer/disupp/images/fader/GatesRotator.jpg" class="marquee_panel_photo" alt="Gates" width="731" /><a href="http://www.dillonsupply.com/default.aspx?page=item%20search%20results&SearchFieldName=VendorItemSearch&SearchSource=BrandsList&selVendorName=%22Gates+Corporation%22&selVendorCode=Gates%20Corporation"><img src="customer/disupp/images/fader/GatesRotator-Button.png" width="116" height="25" style="position:absolute; bottom:18px; left:126px;"/></a>
            <div class="marquee_panel_caption">
                <h2>Gates</h2>
            </div>
        </div>
        <div class="marquee_panel">
            <img src="customer/disupp/images/fader/BursRotator.jpg" class="marquee_panel_photo" alt="Burs" width="731" />
            <div class="marquee_panel_caption">
                <h2>NYC</h2>
                <p>This is a test caption for NYC.<br />This is a test caption for NYC.</p>
                <p><a href="#">Check it out!</a></p>
            </div>
        </div>
    </div>

这是 jQuery:

    var currentPanel = 1;
    var totalPanels = 0;
    var autoPlay = true;
    var timePassed = 0;
    var timeToChange = 6;

    $ (document).ready(function (){
        //Preload
        $('.marquee_panels img').imgpreload(function(){
            initializeMarquee();
        });

        setInterval(autoAdvance, 1000);

        if(window.autoPlay == true){
            $('.marquee_container').hover(
                function(){
                    window.autoPlay = false;
                    $(this).removeClass('autoplay');
                },
                function(){
                    window.autoPlay = true;
                    window.timePassed = 0;
                    $(this).addClass('autoplay');
                }
            );
        }

        //Generate Photo Lineup
        $('img.marquee_panel_photo').each(function (index){
            var photoWidth = $('.marquee_container').width();
            var photoPosition = index * photoWidth;
            $('.marquee_photos').append('<img class="marquee_photo"        style="left:'+photoPosition+'; display:inline-block" src="'+$(this).attr('src')+'" alt="'+$(this).attr('alt')+'" width="'+photoWidth+'" height="310" />');
            $('.marquee_photos').css('width' , photoPosition+photoWidth);
        });

        //Generate Navigation Links
        $('.marquee_panels .marquee_panel').each(function(index){
            $('.marquee_nav').append('<a class="marquee_nav_item"></a>');
            window.totalPanels = index + 1;
        });

        //Set up Navigation Links
        $('.marquee_nav a.marquee_nav_item').click(function(){

            //Set the navigation state
            $('.marquee_nav a.marquee_nav_item').removeClass('selected');
            $(this).addClass('selected');   

            var navClicked = $(this).index();
            var marqueeWidth = $('.marquee_container').width();
            var distanceToMove = marqueeWidth * (-1);  //slides to the left, positive 1 for slide to right
            var newPhotoPosition = navClicked * distanceToMove + 'px';
            var newCaption = $('.marquee_panel_caption').get(navClicked);
            window.currentPanel = navClicked + 1;

            //Animate the photos and caption
            $('.marquee_photos').animate({left: newPhotoPosition}, 1000);  //time interval to slide
            $('.marquee_caption').animate({top: '300px'}, 500, function (){
                var newHTML = $(newCaption).html();
                $('.marquee_caption_content').html(newHTML);
                setCaption();
            });
        });

    });

    function autoAdvance(){
        if(window.timePassed == window.timeToChange){
            window.timePassed = 0;
            if(window.currentPanel == window.totalPanels){
                window.currentPanel = 0;
            }
            if(window.autoPlay == true){
                $('.marquee_nav a.marquee_nav_item:nth-child('+       (window.currentPanel+1)+')').trigger('click');
            }
        }
        else{
            window.timePassed += 1;
        }
    }

    function initializeMarquee(){
        $('.marquee_caption_content').html(
            $('.marquee_panels .marquee_panel:first .marquee_panel_caption').html()
        );
        $('.marquee_nav a.marquee_nav_item:first').addClass('selected');
        $('.marquee_photos').fadeIn(1500);
        setCaption();
    }

    function setCaption(){
        var captionHeight = $('.marquee_caption').height();
        var marqueeHeight = $('.marquee_container').height();
        var newCaptionHeight = marqueeHeight - captionHeight - 15; //padding so that bottom of caption is away from bottom edge
        $('.marquee_caption').delay(100).animate({top: newCaptionHeight}, 500);
    }

任何帮助将不胜感激。预先感谢您。

**编辑当我查看 marquee.js 脚本时，我想知道这是否是我在图像/标题更改之前计算时间的方式。我查看了一个旧的 slider 脚本，它使用了持续时间和间隔的组合(一个表示它停留在页面上的时间，另一个表示更改到下一个 slider 所需的时间)。但是，我不确定如何更改 autoAdvance 函数以便更好地反射(reflect)使用持续时间和间隔。

Answer 1

我最终使用了一个脚本来查看窗口是否处于焦点状态，如果没有聚焦则杀死选取框。这是我使用的脚本(也可以找到 http://www.thefutureoftheweb.com/blog/detect-browser-window-focus )，并根据我的目的进行了一些调整。这是我添加到 marquee.js 文件中的 jquery 片段:

    //Is the Window or Tab in focus
    function onBlur() {
            window.window_focus = false;
    };
    function onFocus(){
            window.window_focus = true;
    };

    if (/*@cc_on!@*/false) { // check for Internet Explorer
            document.onfocusin = onFocus;
            document.onfocusout = onBlur;
    } else {
            window.onfocus = onFocus;
            window.onblur = onBlur;
    }

然后在同一文件中，我编辑了 autoAdvance 函数，使 if 语句成为 autoplay 和 window_focus 变量的条件:

    function autoAdvance(){
        if(window.timePassed == window.timeToChange){
            window.timePassed = 0;
            if(window.currentPanel == window.totalPanels){
                window.currentPanel = 0;
            }
            if(window.autoPlay == true && window.window_focus == true){
                $('.marquee_nav a.marquee_nav_item:nth-child('+(window.currentPanel+1)+')').trigger('click');
            }
        }
        else{
            window.timePassed += 1;
        }
    }

它似乎可以在 Firefox、IE8 和 Chrome 中运行。目前我还没有在所有版本中进行测试。感谢 The Maniac 为我指明了正确的方向。