javascript中无法解释的数学错误_Javascript

javascript中无法解释的数学错误

javascript

javascript中无法解释的数学错误,javascript,Javascript,我有一个功能，用来克隆flash文章滚动条。不幸的是，我在防火墙后面，所以不能上传我自己的代码，但这应该给你一个想法。职能： function select(id) { alert(active+"\n"+((active+1)%4)); var prev = active; active = (typeof(id) == "undefined" ? (active+1)%4 : id); $("#panel").animate({"top": tops[activ

我有一个功能，用来克隆flash文章滚动条。不幸的是，我在防火墙后面，所以不能上传我自己的代码，但这应该给你一个想法。职能：

function select(id) {
  alert(active+"\n"+((active+1)%4));

  var prev  =  active;
  active    = (typeof(id) == "undefined" ? (active+1)%4 : id);

  $("#panel").animate({"top": tops[active]}, 750);
  $("#main"+prev).fadeOut(750);
  $("#main"+active).fadeIn(750);
}

因此，如果在没有id的情况下调用select，它只会按顺序前进到下一个项目，否则将转到所选项目。它在定义的计时器上运行：

timer = setInterval("select()", 5000);

鼠标悬停对象时，将运行此函数：

$("img.thumb").mouseover(function() {
  clearInterval(timer);
  select($(this).attr("id").substr(-1));
  timer = setInterval("select()", 5000);
});

问题在于，鼠标悬停后，select函数在一个周期内失败，下一个对象与上一个对象没有关系。所选对象是一致的——在给定相同初始条件的情况下，每次刷新时都保持不变，但我可以确定它与任何方式无关

最奇怪的是，我在select开始时运行的警报（这应该是一个简单的数学运算）失败了，声称对于我测试的序列-等待从0到1的自动滚动，然后鼠标移动到3+1%4=3

我在firefox和chrome中都测试过这一点，所以它似乎是javascript固有的

我只能假设它以某种方式为active存储了两个不同的值，但这种分裂的性质，以及如何解决它，我无法理解

我已经附上了下面的整个文件，以防有任何其他相关内容。似乎不太可能，但在这一点上我不排除任何可能性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            //alter these as you please
            var thumbs  = ["images/1t.png", "images/2t.png",
                "images/3t.png", "images/4t.png"];
            var mains       = ["images/1.png", "images/2.png",
                "images/3.png", "images/4.png"];
            var links       = ["http://www.goldcoast.com.au/gold-coast-beaches.html",
                "http://www.goldcoast.com.au/gold-coast-whale-watching.html",
                "http://www.goldcoast.com.au/gold-coast-hinterland-rainforest.html",
                "http://www.goldcoast.com.au/gold-coast-history.html"];

            //don't touch these
            var timer   = null;
            var active  = 0;
            var tops    = [0, 77, 155, 234];

            function select(id) {
                alert(active+"\n"+((active+1)%4));

                var prev    =  active;
                active      = (typeof(id) == "undefined" ? (active+1)%4 : id);

                $("#panel").animate({"top": tops[active]}, 750);
                $("#main"+prev).fadeOut(750);
                $("#main"+active).fadeIn(750);
            }

            $(function() {
                for(var i = 0; i < 4; i++) {
                    $("#thumb"+i).attr("src", thumbs[i]);
                    $("#main"+i).attr("src", mains[i]);
                }

                $("#main"+active).show();

                $("img.thumb").mouseover(function() {
                    clearInterval(timer);
                    select($(this).attr("id").substr(-1));
                    timer = setInterval("select()", 5000);
                });

                timer = setInterval("select()", 5000);
            });
        </script>
        <style type="text/css">
            #container  {position:relative;}

            #panel      {position:absolute;left:0px;top:0px;z-index:1;}

            img.thumb   {position:absolute;left:8px;z-index:2;}
            #thumb0     {top:7px;}
            #thumb1     {top:84px;}
            #thumb2     {top:162px;}
            #thumb3     {top:241px;}

            img.main        {position:absolute;left:118px;top:2px;display:none;}
        </style>
    </head>
    <body>
        <div id="container">
            <img src="images/panel.png" id="panel" />
            <img id="thumb0" class="thumb" />
            <img id="thumb1" class="thumb" />
            <img id="thumb2" class="thumb" />
            <img id="thumb3" class="thumb" />
            <img id="main0" class="main" />
            <img id="main1" class="main" />
            <img id="main2" class="main" />
            <img id="main3" class="main" />
        </div>
    </body>
</html>

建议使用parseInt。

Dude，使用setTimeoutselect，5000；而不是选择。eval是邪恶的。理解代码有困难，但我认为这很可能是类型转换错误。“在某个地方解析可能会解决这个问题。”“好的，干杯。我以前是用一个参数调用它的。1传递函数，而不是字符串，以setTimeout和setInterval，它是伪装的eval！。2$this.attr'id'是相当不必要的；此.id适用于所有浏览器，输入字符更少，效率更高。3很可能，有一个jQuery插件已经实现了您想要的功能。即使不使用插件，也几乎可以肯定有一种更干净的方式来编写鼠标悬停处理程序。@timdream实际上，parseInt做到了，干杯。我必须停止这么懒地打字。如果你把它作为答案贴出来，我会接受的。