<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>div</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none;}
#ul{height:20px; position:absolute; bottom:30px; right:50px;}
#ul li{width:20px; margin-left:2px;background:orange;height:20px; float:left;}
#div{width:600px; height:200px; position:relative; top:300px; overflow:hidden; background:#abc;}
.pic{width:600px; overflow:hidden; position:absolute; left:0; top:-200px;}
.pic .img{width:600px; height:200px;}
</style>
<script type="text/javascript">
onload = function(){
var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
var len = li.length;
var current = 0;
var time;
var aiyou = document.getElementById("aiyou");
li[0].style.background = "red";
aiyou.style.top="0";
for(var j=0;j<len;j++){
(function(x){
li[x].onmouseover = function(){
clearInterval(time);
current = x;
play();
}
li[x].onmouseout = function(){
time = setInterval(play,1000);
}
})(j);
}
function play(){
current %= len;
for(var i=0; i <len; i++){
li[i].style.background = "orange";
}
li[current].style.background="red";
aiyou.style.top="-"+(current *200)+"px";
current++;
}
time = setInterval(play,1000);
}
</script>
</head>
<body>
<div id="div">
<div class="pic" id="aiyou">
<div class="img">a</div>
<div class="img">b</div>
<div class="img">c</div>
<div class="img">d</div>
<div class="img">e</div>
</div>
<ul id="ul">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
</body>
</html>
