0

我有一个用 jQuery 构建的图像滑块。它设置为以 7000 毫秒的间隔滑动图像。有时，并且仅有时，滑块似乎会以超高速（幻灯片之间大约 1 秒的间隔）滑动图像。我无法确定原因。请帮忙！

使用滑块链接到网站：http ://healthyhometech.com

    function slider() {
        $(".paging").hide();
        $(".paging a:first").addClass("active");

        var imageWidth = $(".window").width();
        var imageSum = $(".image_reel img").size();
        var imageReelWidth = imageWidth * imageSum;

        $(".image_reel").css({'width' : imageReelWidth});

        rotate = function(){
            var triggerID = $active.attr("rel") - 1; 
            var image_reelPosition = triggerID * imageWidth; 

            $(".paging a").removeClass('active'); 
            $active.addClass('active'); 

            $(".image_reel").animate({
            left: -image_reelPosition
            }, 500 );

        }; 

        rotateSwitch = function(){
            play = setInterval(function(){ 
             $active = $('.paging a.active').next(); 
                if ( $active.length === 0) { 
                $active = $('.paging a:first'); 
            }

                rotate(); 
            }, 7000); //Timer speed
        };

        rotateSwitch();

        $(".image_reel a").hover(function() {
        clearInterval(play); 
        }, function() {
        rotateSwitch(); 
        }); 


    };
4

2 回答 2

2

setInterval 有一个关键问题：它保留在内存中！因此，您很可能在测试时刷新了页面，因此为同一过程创建了各种 setInterval，因此，有时您会看到该过程执行得更快（实际上，setInterval 发生了多次）。

我可以通过使用 var "my-interval" = setInterval 来解决类似的问题，并且在运行 setInterval 之前检查它是否存在（不为零）。如果是这样，杀死它或根本不[重新]运行：

var myInterval;
if (myInteval == undefined) myInterval = setInterval(function () {
    ...
    myInterval=12345;
},..);
于 2011-11-10T09:37:45.420 回答
0

尝试增加以下代码部分中的时间值：

$(".image_reel").animate({
        left: -image_reelPosition
        }, 500 ); //Here increase the value 500 to a value suitable to you, for example 1000, 2000 etc. anything you like.

该值以毫秒为单位，定义了动画速度。

[编辑]

好的，根据我的观察，我认为只有当您在一个选项卡中打开网页并继续在其他选项卡上工作时，您才会遇到快速滑动问题，然后当您返回包含该页面的选项卡时，它会快速滑动图像步伐。但是，如果您留在选项卡上，则不会发生。我的猜测是您在Chrome浏览器中注意到了这个问题。

脚本似乎没有问题，只有 Chrome 浏览器的工作方式。如果您将选项卡留在后台，chrome 可能会暂停 setInterval() 函数，当您返回页面时，它会在后台运行它。所以这可能就是 Chrome 浏览器的工作方式。代码没有问题。

于 2011-11-10T04:47:31.110 回答