<!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" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.show{ display:block;}
.hide{ display:none;}
div{ position:relative; width:360px;}
ul{ right:5px; bottom:5px; position:absolute;}
ul li{ list-style:none;float:left; border:#000000 solid 1px; background:#FFFFFF; margin:0 2px 0 0; padding:1px;}
</style>
</head>
<body>
<script type="text/javascript">
var j = 2;
function go(a){ /*图片切换*/
var imgs = document.getElementsByTagName("img");
for(var i = 0;i<imgs.length;i++){
imgs[i].className = "hide";
}
document.getElementById(a).className = "show";
clearTimeout(time);
}
function auto(){ /*自动播放*/
go(j);
j++;
if(j==5)j=1;
time = setTimeout("auto()",1000);
}
time = setTimeout("auto()",1000);
function move(){ /*鼠标移出*/
go(j);
j++;
if(j==5)j=1;
time = setTimeout("auto()",1000);
}
</script>
<div>
<img id="1" class="show" src="1.jpg" />
<img id="2" class="hide" src="2.jpg" />
<img id="3" class="hide" src="3.jpg" />
<img id="4" class="hide" src="4.jpg" />
<ul>
<li onmouseover="go(1)" onmouseout="move()">1</li>
<li onmouseover="go(2)" onmouseout="move()">2</li>
<li onmouseover="go(3)" onmouseout="move()">3</li>
<li onmouseover="go(4)" onmouseout="move()">4</li>
</ul>
</div>
</body>
</html>
setTimeout、setInterval、clearTimeout是window的方法，置于<script>根标签下会自动调用，不用置于方法体内。
