<!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=gb2312" />
<title></title>
<style type="text/css">
body, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, p, form { padding: 0;
margin: 0; }
li { list-style: none; }
img { border: 0; }
body { font-family: Arial;font-size:12px }
a{text-decoration:none;color:#000}
#wrap{width:920px;height:130px;margin:55px auto;position:relative;overflow:hidden}
#colList{width:65px;position:absolute;right:0;bottom:3px;z-index:9999;}
#colList li{width:15px;height:15px;background:#fff;float:left;margin-left:3px;display:inline;text-align:center;border:1px solid}
#colList li a{display:block;height:15px}
#color{width:920px;height:390px;position:absolute;top:0px;left:0;z-index:9998}
.box{width:920px;height:130px;}
.red{background:red;}
.yellow{background:yellow;}
.orange{background:orange;}
</style>
<script type="text/javascript">
//alert(-90/10)
var Speed =0;
var timer = null;
var timers = null;
var num = 0;
function topMove(iTarget){
/*if(timer){
clearInterval(timer)
}*/
colorMove(iTarget)
}
function colorMove(n){
var color = document.getElementById("color");
if(color.offsetTop != n){
Speed += (n - color.offsetTop)/7;
}
color.style.top = Speed + "px";
if(timer){
clearTimeout(timer)
}
timer = setTimeout("colorMove("+n+")",10)
}
function autoMove(){
if(0 == num){
topMove(0);
num = -130;
}
else if(-130 == num){
topMove(-130);
num = -260;
}
else{
topMove(num);
num =0;
}
}
setInterval("autoMove()",1000)
</script>
</head>
<body>
<div id="wrap">
<ul id="colList">
<li><a href="" onmouseover="topMove(0)">1</a></li>
<li><a href="" onmouseover="topMove(-130)">2</a></li>
<li><a href="" onmouseover="topMove(-260)">3</a></li>
</ul>
<div id="color">
<div class="red box">
</div>
<div class="yellow box">
</div>
<div class="orange box">
</div>
</div>
</div>
</body>
</html>
