2

我为我创建的网站创建了一个简单的旋转横幅http://sandbox.worldwatchlist.us。

一切正常，直到我转到浏览器中的另一个选项卡，然后几秒钟后又回来了……横幅每 0.5 秒或更短时间旋转一次。

我不知道为什么会发生这种情况，尤其是因为我setTimeout在 javascript 中使用并将其设置为 10 秒（10000 毫秒）。

以下是服务器上banner.js 文件中的所有代码。请指出任何可以解决此问题的方法。您可以查看上面的网站，也可以查看我在http://www.youtube.com/watch?v=HWb2uc6KpFM拍摄的视频截图。每个浏览器都有我测试过的这个问题。

我到处寻找“jquery横幅旋转太快”的答案，除了“使用setTimeout”之外没有其他答案可以解决我的问题。

var banner_width = 960;
var default_pos = 0;
var current_pos = 0;
var next_pos;
var speed = 500;
var banner_tot; //number of banners
var current_num = 1; //current banner number

    $(function(){

        banner_tot = $(".banner_item").length;
        $(".banner_slider").css({width:(banner_tot*banner_width)});

        setTimeout( "slide()", 10000 );
    });


    function slide(){
        if(current_num==(banner_tot)){
            next_pos= 0;
            $(".banner_slider").animate({left: next_pos}, speed);
            current_num=1;

            setTimeout( "slide()", 10000 );
        }
        else{
            next_pos= current_num*(-banner_width);
            $(".banner_slider").animate({left: next_pos}, speed);
            current_num++;

            setTimeout( "slide()", 10000 );
        }
    }
4

1 回答 1

5

您正在目睹的是动画的积累。当您在浏览器中切换到不同的选项卡时，动画会被放入队列中，当您切换回原始选项卡时，所有动画都会按顺序播放。

查看http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup 了解更多信息。

于 2012-02-09T20:22:56.420 回答