Question

我有一个函数，用于克隆flash文章卷轴this page。不幸的是我在防火墙后面，所以不能上传我自己的代码，但这应该给你一个想法。功能：

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);
}

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

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

当鼠标悬停物体时，运行此功能：

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

麻烦的是，在鼠标悬停之后，select函数会失败一个周期，下一个对象与之前的对象无关。所选择的对象是一致的 - 在给定相同初始条件的情况下，每次刷新都保持不变，但它与我可以确定的任何方式无关。

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

我已经在firefox和chrome中测试了这个，所以它似乎是javascript固有的。

我只能假设它以某种方式为活动存储了两个不同的值，但是这种分裂的本质以及如何解决它，超出了我的范围。

我已经附上了整个文件，以防万一其他相关内容。似乎不太可能，但在这一点上，我并没有做出任何裁决。

<!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>

Answer 1

使用parseInt()作为评论建议。

javascript中无法解释的数学错误

1 个答案: