图片自动切换+鼠标手动切换（求解Bug）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
#tr1{position:absolute; top:0px; left:0px; z-index:0}
#tr2{position:absolute; top:0px; left:0px; z-index:0}
#tr3{position:absolute; top:0px; left:0px; z-index:0}
#tr4{position:absolute; top:0px; left:0px; z-index:0}
#tr5{position:absolute; top:0px; left:0px; z-index:0}
#tr6{position:absolute; top:330px; left:350px; z-index:3}
#sp1,#sp2,#sp3,#sp4,#sp5{background-color:#99cc00;}
</style>
</head>
<body>
<script type="text/javascript">         
$(function () {             
$("#tr1").show();
$("#tr2").hide();             
$("#tr3").hide();             
$("#tr4").hide();
$("#tr5").hide();
$("#tr6").show(); 
$("#sp1").mouseenter(function () {                 
$("#tr1").show();
$("#sp1").css("background-color","blue");
$("#tr2").hide();
$("#tr3").hide();                 
$("#tr4").hide();
$("#tr5").hide();
$("#tr6").show(); });
$("#sp1").mouseleave(function(){
$("#sp1").css("background-color","#99cc00");
}); 
$("#sp2").mouseenter(function () {                 
$("#tr1").hide();                 
$("#tr2").show();
$("#sp2").css("background-color","blue");
$("#tr3").hide();                 
$("#tr4").hide();
$("#tr5").hide();
$("#tr6").show(); });
$("#sp2").mouseleave(function(){
$("#sp2").css("background-color","#99cc00");
});
$("#sp3").mouseenter(function () {                 
$("#tr1").hide();                 
$("#tr2").hide();                 
$("#tr3").show();
$("#sp3").css("background-color","blue");
$("#tr4").hide();
$("#tr5").hide();
$("#tr6").show(); });
$("#sp3").mouseleave(function(){
$("#sp3").css("background-color","#99cc00");
});
$("#sp4").mouseenter(function () {                 
$("#tr1").hide();                 
$("#tr2").hide();                 
$("#tr3").hide();                 
$("#tr4").show();
$("#sp4").css("background-color","blue");
$("#tr5").hide();
$("#tr6").show(); });
$("#sp4").mouseleave(function(){
$("#sp4").css("background-color","#99cc00");
});
$("#sp5").mouseenter(function () {                 
$("#tr1").hide();                 
$("#tr2").hide();                 
$("#tr3").hide();                 
$("#tr4").hide();
$("#tr5").show();
$("#sp5").css("background-color","blue");
$("#tr6").show(); });
$("#sp5").mouseleave(function(){
$("#sp5").css("background-color","#99cc00");
}); });    
 </script>
<form id="form1" runat="server">
<div>
<table>
<tr id="tr1">
<script language ="javascript">
var curIndex=0;
var timeInterval=2000;
var arr=new Array();
arr[0]="10.jpg";
arr[1]="11.jpg";
arr[2]="12.jpg";
arr[3]="13.jpg";
arr[4]="14.jpg";
setInterval(changeImg,timeInterval);
function changeImg(){    
var obj=document.getElementById("obj");    
if (curIndex==arr.length-1)     {        
curIndex=0;    
}    else    {       
curIndex+=1;    
}    
obj.src=arr[curIndex];
} 
</script> 
<td><img id="obj" src ="10.jpg" width=774 height=411 border =0 /></td>
</tr>
<tr id="tr2">
<td><img src="11.jpg" alt="" /></td>
</tr>
<tr id="tr3">
<td><img src="12.jpg" alt="" /></td>
</tr>
<tr id="tr4">
<td><img src="13.jpg" alt="" /></td>
</tr>
<tr id="tr5">
<td><img src="14.jpg" alt="" /></td>
</tr>
<tr id="tr6" >
<td>
<span id="sp1">1</span> 
<span id="sp2">2</span>
<span id="sp3">3</span> 
<span id="sp4">4</span>
<span id="sp5">5</span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>代码都是来自CSDN各位大神的帮助，我把上面的整合了一下
想做成 图片自动切换+鼠标手动切换  
但是现在出了问题
Bug：当鼠标切换时会中断自动切换
求解？？