JavaScript，缩略图（）

Question

动画（图像更改）不会停留在onmouseout事件上。为什么？

的JavaScript：

function thumbnail (type, start, i, m, id, begin, end) 
{ 
    if (type == 1) 
    { 
     document.getElementById(id).src = begin + id + i + end; 

     if (i == m + 1) 
     { 
      document.getElementById(id).src = begin + id + end; 
      i = 2; 
     } 
     else 
     { 
      i++; 
     } 

     setTimeout("thumbnail(1, "+start+", "+i+", "+m+", '"+id+"', '"+begin+"', '"+end+"');", 1000); 
    } 

    if (type == 2) 
    { 
     document.getElementById(id).src = begin + id + end; 
    } 
} 

HTML：

<img id="aaa" src="http://example.com/file/aaa.png" width="160" height="120" onmouseover="thumbnail(1,2,2,9,'aaa','http://example.com/file/','.png');" onmouseout="thumbnail(2,2,2,9,'aaa','http://example.com/file/','.png');" />

图片：

aaa.png，aaa2.png，...，aaa9.png

Answer 1

尝试是这样的：

var delay; 

function thumbnail (type, start, i, m, id, begin, end){ 
    if (type == 1){ 
    document.getElementById(id).src = begin + id + i + end; 
    if (i == m + 1){ 
     document.getElementById(id).src = begin + id + end; 
     i = 2; 
    } 
    else{ 
     i++; 
    } 
    if(delay) clearTimeout('delay'); 
    delay = setTimeout("thumbnail(1, "+start+", "+i+", "+m+", '"+id+"', '"+begin+"', '"+end+"');", 1000); 
    } 
    if (type == 2){ 
    document.getElementById(id).src = begin + id + end; 
    clearTimeout('delay'); 
    } 
} 

Answer 2

因为你递归地调用setTimeout并且没有条件永远停止它。