研究了很久都没参透
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
<script type="text/javascript" src="js/jquery-1.6.js">
</script>
<style>
*{margin:0;padding:0;}
ul{list-style:none outside none}
.fl{float:left;display:inline}
.fr{float:left;display:inline}
#wrap{width:800px;height:130px;margin:20px auto;position:relative;overflow:hidden}
#con{width:3200px;position:absolute;top:0;left:0;}
#con li{width:800px;height:130px;float:left}
.red{background:red;}
.blue{background:blue;}
.yellow{background:yellow;}
.pink{background:pink;}
#text li{width:150px;float:left;}
</style> </head> <body>
    <div id="before">前进</div>
    <div id="wrap">
        <div id="con">
            <ul>
                <li class="red"></li>
                <li class="blue"></li>
                <li class="yellow"></li>
                <li class="pink"></li>
            </ul>
        </div>
    </div>
    <div id="after">后退</div>

<div id="text">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript"> var dir;
var i=0;
var speed = 0;
var timer = null;
var num =0;
var before = document.getElementById("before");
var after = document.getElementById("after");
var text = document.getElementById("text");
function clicks(){
before.onclick = be;
after.onclick = ft;
}
clicks()
function be(){
dir = true;
move();
}
function ft(){
dir = false;
move();
}
function move(){
var con = document.getElementById("con");
var arr = [0,-800,-1600,-2400];
if(dir == true){
if(i == arr.length-1){
return;
}
speed += (arr[i+1] - con.offsetLeft)/5;
con.style.left = parseInt(speed) + "px";

if(speed <= arr[i+1]){
i++;
}
else{
clearTimeout(timer);
timer = setTimeout("move()",20);
}
document.getElementById("text").getElementsByTagName("li")[0].innerHTML += parseInt(speed) + ":"+con.offsetLeft+arr[i+1]+":"+i+"<br />"; 
} if(dir == false){
if(i<1){
return;
}
document.getElementById("text").getElementsByTagName("li")[2].innerHTML += parseInt(speed) +":"+con.offsetLeft+":"+arr[i-1]+":"+i+"s" +"<br />"; 
speed -= (arr[i-1] + con.offsetLeft)/5;
con.style.left = parseInt(speed) + "px";

if( parseInt(speed) == arr[i-1]){
//alert("s") ;
i--;
}
else{
clearTimeout(timer);
timer = setTimeout("move()",20);
}
document.getElementById("text").getElementsByTagName("li")[1].innerHTML += parseInt(speed) +":"+con.offsetLeft+":"+arr[i-1]+":"+i+ "<br />"; 
}
}
//alert(0 + -159)
</script> </body>
</html>