<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8">
<style>
*{margin:0;padding:0;border:0}
#content li{float:left;list-style:none;height:30px;width:40px;text-align:center;line-height:30px;border:1px solid orange;margin-right:10px}
#content{margin-top:10px;margin-left:50px}
#head img{width:490px;height:340px;margin-left:5px;margin-top:5px}
#head li{list-style:none}
</style>
</head>
<body οnlοad="uu()">
<div id="main" style="width:500px;height:400px;margin:auto;background-color:green">
<div id="head" style="width:500px;height:350px;background-color:blue">
<ul>
<li id="img1"><img src="
1.jpg" id="img" οnmοuseοver='end_change()' οnmοuseοut="uu()"></li>
</ul>
</div>
<div id="content" >
<ul>
<li id="li1" style="background-color:orange" οnmοuseοver='over(1)' οnmοuseοut="uu()">1</li>
<li id="li2" οnmοuseοver='over(2)' οnmοuseοut="uu()" >2</li>
<li id="li3" οnmοuseοver='over(3)' οnmοuseοut="uu()" >3</li>
<li id="li4" οnmοuseοver='over(4)' οnmοuseοut="uu()" >4</li>
<li id="li5" οnmοuseοver='over(5)' οnmοuseοut="uu()" >5</li>
</ul>
</div>
</div>
</body>
<script>
var count=1;
var id;
function changepic(){
var img=document.getElementById('img');
if(count == 6){
count =1;
}
img.src=count+".jpg";
for(var i=1;i<=5;i++){
document.getElementById("li"+i).style.backgroundColor="green";
}
document.getElementById("li"+count).style.backgroundColor="orange";
count++;
}
function uu(){
id=setInterval("changepic()",1000);
}
function end_change(){
clearInterval(id);
}
function over(n){
end_change();
for(var i=1;i<=5;i++){
document.getElementById("li"+i).style.backgroundColor="green";
}
document.getElementById("li"+n).style.backgroundColor="orange";
document.getElementById("img").src=n+".jpg";
count=n;
}
</script>
</html>