实现图片轮流切换
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery-132-min.js"></script>
<title>无标题文档</title>
<style >
.dangc{ float:left;}
</style>
</head>
<script language="javascript">
$(document).ready(function(){
img1=new Image();img2=new Image(); img3=new Image();
img1.src="1.png";img2.src="2.png";img3.src="3.png";
var i=0;
function qih(){
i=i+1
if (i>3) i=1;
$('.dangc').html('<img src="'+i+'.png" width="468" height="390" border="0" usemap="#Map" />');
}
var timer=setInterval(qih,1000);
})
function slit(ints){
$('.dangc').html('<img src="'+ints+'.png" width="468" height="390" border="0" usemap="#Map" />');
}
</script>
<body>
<div>
<div>
<div width="468" height="390" border="0" usemap="#Map" /></div>
<map name="Map" id="Map">
<area shape="rect" coords="151,12,391,97" onmousemove="slit('1')" />
<area shape="rect" coords="376,132,483,347" onmousemove="slit('3')" />
<area shape="rect" coords="45,107,154,320" onmousemove="slit('2')" />
</map>
<img src="right.png" width="532" height="390" />
</div>
</body>
</html>
