<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var table = document.getElementById("control");
var ignumber=10;
var v1 = setInterval("changeTableImageNumber()",2000);
table.onmouseout = function()//鼠标离开容器则自动执行
{
v1 = setInterval("changeTableImageNumber()",2000);
}
table.onmouseover = function()//鼠标在容器上停留则停止自动执行
{
leaveInterval(v1);
}
function changeTableImageNumber()
{
if(++ignumber>20)
{
ignumber = 10;
}
changeTableImage(ignumber);
}
function changeTableImage(ignumber)
{
var ig = document.getElementById("changeImage");
ig.src = "image/"+ignumber+".jpg";
}
</script>
<title>auto change color</title>
</head>
<body>
<table id="control" align="center" width="700px" height="500px" border="1px">
<tr style="width: 100%; height: 100%;">
<td style="width: 100%; height: 100%;">
<img id="changeImage" width="700px" height="500px" src="image/10.jpg">
</td>
</tr>
</table>
</body>
</html>
移动到td也会触发mouseout事件，所以得判断是否移动到子元素上才行，而且你leaveInterval函数也没定义
leaveInterval(v1); -> clearInterval(v1)试试