<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#wrap{
width: 590px;
height: 340px;
position: relative;
margin: 100px auto;
border: 1px solid black;
overflow: hidden;
}
#box{
position: absolute;
}
#box li{
width: 590px;
height: 340px;
float: left;
}
#btn{
position: absolute;
left: 0;
bottom: 10px;
}
#btn li{
width: 100px;
height: 15px;
background: red;
position: relative;
float: left;
margin-left: 15px;
}
#btn li span{
width: 0;
height: 15px;
position: absolute;
left: 0;
top:0;
background: #eCeCeC;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var oWarp = document.getElementById('wrap');
var oBox = document.getElementById('box');
var aLi = oBox.children;
var oBtn = document.getElementById('btn');
var aBtn = oBtn.children;
var aSpan = oBtn.getElementsByTagName('span');
oBox.style.width = aLi.length*aLi[0].offsetWidth + 'px';
var iNow = 0;
function next(){
move(aSpan[iNow],{width:100},{time:2000,easeing:'linear',fn:function(){
iNow++;
if(iNow == aBtn.length)iNow = 0;
for(var i = 0;i < aSpan.length;i++){
aSpan[i].style.width = '0';
}
move(oBox,{left:-aLi[0].offsetWidth * iNow},{time:2000,easeing:'ease-in',fn:next});
}});
}
//递归函数；
next();
}
</script>
</head>
<body>
<div id="wrap">
<ul id="box">
<li><img src="image/1.jpg"width="590px" height="340px"></li>
<li><img src="image/2.jpg"width="590px" height="340px"></li>
<li><img src="image/3.jpg"width="590px" height="340px"></li>
<li><img src="image/4.jpg"width="590px" height="340px"></li>
<li><img src="image/5.jpg"width="590px" height="340px"></li>
</ul>
<ol id="btn">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ol>
</div>
</body>
</html>
