Question

我正在尝试根据一秒计时器更改图像，但图像仍然是数组中的第一个对象我到目前为止的代码是

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab 8 - Jackhammer Man</title>
<script type="text/javascript">
 var jackhammers = new Array();
 jackhammers[0] = "<img src='Images/jackhammer0.gif'>";
 jackhammers[1] = "<img src='Images/jackhammer1.gif'>";
 jackhammers[2] = "<img src='Images/jackhammer2.gif'>";
 jackhammers[3] = "<img src='Images/jackhammer2.gif'>";
 jackhammers[4] = "<img src='Images/jackhammer4.gif'>";
 jackhammers[5] = "<img src='Images/jackhammer5.gif'>";
 jackhammers[6] = "<img src='Images/jackhammer6.gif'>";
 jackhammers[7] = "<img src='Images/jackhammer7.gif'>";
 jackhammers[8] = "<img src='Images/jackhammer8.gif'>";
 jackhammers[9] = "<img src='Images/jackhammer9.gif'>";
 jackhammers[10] = "<img src='Images/jackhammer10.gif'>";

 var curJackhammer;
 function bounce() {
   var img = document.getElementsByTagName("img");
   var i = 0 ;

   for (i = 0; i<10;i++) {
      if(jackhammers[i].src == img.src) {
        if(i === jackkhammers.length) {
          img.src = jackhammers[0].src;
          break;
        }
          img.src = jackhammers[i+1].src;
          break;
      } 
   }
 }
</script>
</head>


<body>
<img onMouseOver="setInterval(function(){bounce},1000);" onMouseOut="clearInternval(fuction(){bounce};" src="Images/jackhammer0.gif" id="hammer" name="hammerman" alt="Jackhammer Man">
</body>
</html>

我遇到的问题是mouseover事件无法激活，我在代码中找不到错误，因为我没有找到任何调试器。任何试图让图像的鼠标悬停功能经常变化的帮助都会受到赞赏。

Answer 1

var img = document.getElementsByTagName("img");

这将返回NodeList或元素数组。您需要使用[0]

访问此元素的索引

或者更好的是，使用querySelector返回NodeList中的第一个元素

Answer 2

你有错字if（i === jackkhammers.length）
jackhammers [x]没有src属性，所以要在没有.src
而不是

的onMouseOver =＆＃34;的setInterval（函数（）{}弹跳，1000）;＆＃34;

写：

onMouseOver="setInterval(function(){bounce();},1000);"

Answer 3

您一直在引用src数组中项目的jackhammers属性：

img.src = jackhammers[0].src;

即使该数组中的项目是字符串，也不是对象。

此外，还有一个错字：

if(i === jackkhammers.length) {

使用浏览器的开发工具可以立即看到这些类型的错误。将断点放在怀疑出错的地方，并在逐步完成代码时开始调查变量和假设。

见这里：http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820

Answer 4

根据导师的一些建议，更新后的代码改变了一些内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab 8 - Jackhammer Man</title>
<script type="text/javascript">

var jackhammers = new Array(11);
jackhammers[0] = "Images/jackhammer0.gif";
jackhammers[1] = "Images/jackhammer1.gif";
jackhammers[2] = "Images/jackhammer2.gif";
jackhammers[3] = "Images/jackhammer3.gif";
jackhammers[4] = "Images/jackhammer4.gif";
jackhammers[5] = "Images/jackhammer5.gif";
jackhammers[6] = "Images/jackhammer6.gif";
jackhammers[7] = "Images/jackhammer7.gif";
jackhammers[8] = "Images/jackhammer8.gif";
jackhammers[9] = "Images/jackhammer9.gif";
jackhammers[10] = "Images/jackhammer10.gif";

var curJackhammer = 0;
var direction;
var begin;

function bounce(){

    if(curJackhammer == 10)
        curJackhammer = 0;
    else
        ++curJackhammer;
        document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer].src;

    if(curJackhammer == 0)
        direction = "up";

    else if(curJackhammer == 10)
        direction = "down";
        document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer];
}

function startBouncing(){

    if (begin)
        clearInterval (begin);
    begin = setInterval("bounce()",90);
}

</script>

</head>

<body>

<h1>Jackhammer Man</h1>

<p><img onMouseOver="startBouncing();" onMouseOut="clearInterval(begin);" src="Images/jackhammer0.gif" height="113" width="100" alt="Image of a man with a jackhammer." /></p>
</body>
</html>


>

使用firebug进入代码，一旦我进入它就可以工作，但只是简单地将鼠标置于无用状态。

手摇锤不会改变鼠标悬停

4 个答案: