box{margin:100px auto;}是为了看着方便，使其居中，在IE7-无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="十七-vikang" />
<title>十七 - http://www.jianshu.com/u/626b6b7f6b78</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 600px;
height: 300px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
#box ul {
position: absolute;
left: 0;
top: 0;
}
#box ul li {
width: 600px;
height: 300px;
float: left;
line-height: 300px;
text-align: center;
font-size: 250px;
color: #fff;
}
#box ol {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
bottom: 10px;
}
#box ol li {
width: 80px;
height: 20px;
background: #194508;
float: left;
margin: 10px;
position: relative;
}
#box ol li span {
position: absolute;
left: 0;
top: 0;
width: 0px;
height: 20px;
background: #fffc4e;
}
</style>
<script>
function getStyle(obj,name){
return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}
function move(obj,json,opitions){
opitions = opitions || {};
opitions.duration = opitions.duration || '800';
opitions.easing = opitions.easing || 'ease-in';
clearInterval(obj.timer);
var start = {};
var dis= {};
for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name]-start[name];
}
var count = Math.floor(opitions.duration/30);
var n = 0;
obj.timer = setInterval(function(){
n++
for(var name in json){
switch(opitions.easing){
case 'linear':
var a = n/count;
var cur = dis[name]*a;
break;
case 'ease-in':
var a = n/count;
var cur = dis[name]*a*a*a;
break;
case 'ease-out':
var a = 1-n/count;
var cur = dis[name]*(1-a*a*a);
break;
}
if(name=='opacity'){
obj.style[name]=start[name]+cur;
obj.style.filter='alpha(opacity:'+(start[name]+cur)*100+')';
}else{
obj.style[name]=start[name]+cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
opitions.complete && opitions.complete();
}
},30);
}
</script>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=oBox.children[0];
var oOl=oBox.children[1];
var aLi=oUl.children;
var aSpan=oOl.getElementsByTagName('span');
//复制一份
oUl.innerHTML+=oUl.innerHTML;
//计算宽度
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
var iNow=0;
function next(){
move(aSpan[iNow%aSpan.length],{width:80},{
easing:'linear',
complete:function(){
iNow++;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.width=0;
}
startMove(oUl,-iNow*aLi[0].offsetWidth,next);
}
});
}
next();
var left=0;
var timer=null;
var W =oUl.offsetWidth/2;
function startMove(obj,iTarget,complete){
clearInterval(timer);
var start = left;
var dis=iTarget-start;
var count = Math.floor(1000/30);
var n =0;
timer=setInterval(function(){
n++;
var a = 1-n/count;
var cur = start+dis*(1-a*a*a);
left=cur;
obj.style.left=left%W+'px';
if(n==count){
clearInterval(timer);
complete&&complete();
}
},30);
}
};
</script>
</head>
<body>
<div id="box">
<ul>
<li style="background: #0ff">0</li>
<li style="background: #f00">1</li>
<li style="background: #00f">2</li>
<li style="background: #000">3</li>
</ul>
<ol>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ol>
</div>
</body>
</html>
