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

www382398355 2012-12-28 11:59:33



<!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>