Javascript 鼠标悬停在带有JackHammer图像的动画上_Javascript_Image_Onmouseover_Onmouseout

Javascript 鼠标悬停在带有JackHammer图像的动画上

javascript image

Javascript 鼠标悬停在带有JackHammer图像的动画上,javascript,image,onmouseover,onmouseout,Javascript,Image,Onmouseover,Onmouseout,所以我在处理一个小问题。我设法让动画播放，一旦你用鼠标移动到图像上，但它一直通过它。我总共有10张图片，所以你将鼠标停留在图片上的时间越长，出现的图片就越多。如果你移除鼠标，它就会停在它停在的任何图像上。我只需要它转到最后一个图像，即图像10，然后停在那里，甚至可能重置回图像0 <script type="text/javascript"> var curJackhammer = 0; var begin; function bounce() { document.getEle

所以我在处理一个小问题。我设法让动画播放，一旦你用鼠标移动到图像上，但它一直通过它。我总共有10张图片，所以你将鼠标停留在图片上的时间越长，出现的图片就越多。如果你移除鼠标，它就会停在它停在的任何图像上。我只需要它转到最后一个图像，即图像10，然后停在那里，甚至可能重置回图像0

<script type="text/javascript">

var curJackhammer = 0;
var begin;

function bounce() {

document.getElementsByTagName('img')[0].src = 'jackhammer' + curJackhammer + '.gif';
curJackhammer ++;

if (curJackhammer > 10) {
    curjackhammer = 0;
}

} // end of bounce funntion

function startBouncing() {
if (begin) {
    clearInterval (begin);
}  // end of if statement
begin = setInterval(bounce,90);
} // end of start bounce function

</script>

</head>

<body>

<h2>Jackhammer Man</h2>

<img src="jackhammer0.gif" onMouseOver="startBouncing();" onMouseOut="clearInterval(begin);" alt="Jack Hammer Man" />

</body>

有什么建议吗？

我建议这样的建议

function endBouncing() {
  clearInterval(begin);
  curJackHammer = 0;
  bounce();
}

然后将onMouseOut处理程序设置为endBouncing

抱歉，我想我不清楚@CharlesBahena是否解决了这个问题，或者是否还有其他问题？