Question

好的，我试图用两个方向按钮创建另一个预加载图像的滑块（无论你想叫它）。按照我想要的方式获得动画，控制想法来自教程。

（教程：How to Make Auto-Advancing Slideshows）

所以，我根据自己的需要调整了自动增强解决方案，让一切正常。但是，当我尝试在FF（8.0）中运行它时，我遇到了一些问题。单击一个按钮后，除了在预设的3秒时间后动画继续的部分以外，它将完成所有操作，而IE（8.0）没有问题（未在其他浏览器中测试过）。

我做错了什么？

以下是必要的代码：

Html部分：

<div id=imgholder1>
    <div id="imgholder2"></div>
</div>
<div id="bwd" class="button"><</div>
<div id="fwd" class="button">></div>

的jQuery / JavaScript的：

var traker=0;
$(document).ready(function(){
    var numOfImages=4;
    var timeOut = null;

    (function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);     
    })();

    function preload(imgIndex,numImages){
        $("#imgholder1").css('background-image','url("'+imgIndex+'.jpg")');
        $("#imgholder2").hide(0);
        imgIndex < numImages ? imgIndex++ : imgIndex=1
        $("#imgholder2").css('background-image','url("'+imgIndex+'.jpg")');
        traker=imgIndex;
    }
    preload(1,numOfImages);

    function animate(imgIndex,numImages){
        $("#imgholder2").fadeIn("slow",function(){
            preload(imgIndex,numImages);
        });
    }

    $("#fwd").bind("click",function(e,simulated){
        animate(traker,numOfImages);
        if(!simulated){
            clearTimeout(timeOut);
            timeOut = setTimeout(autoAdvance,3000);
        }
    });

    $("#bwd").bind("click",function(){
        var temp=traker-2;
        if(temp == 0){temp=numOfImages;}
        if(temp == -1){temp=numOfImages-1;}
        $("#imgholder2").css('background-image','url("'+temp+'.jpg")');
        animate(temp,numOfImages);
        clearTimeout(timeOut);
        timeOut = setTimeout(autoAdvance,3000);
    });
});

Answer 1

乍一看，看起来您的timeout变量位于错误的范围内 - 将其声明在所有内容之外，以便在函数之间共享：

var traker=0;
var timeOut;

就个人而言，我也避免使用与此类似的保留方法关键字，因此请使用：

var tmr;

此外，您应该使用window.setTimeout而不仅仅是setTimeout

Answer 2

修复！

此：

(function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);
})();

应如下所示：

function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);     
}
autoAdvance();

否则FF无法识别自我调用函数autoAdvance。

jQuery滑块 - setTimeout crossbrowser毛刺？

2 个答案: