图片滚动，带缓动哦，亲~

Question

<div id="roll_box">
<ul>
<li><img src="img/1.jpg" width="400" height="200" /></li>
<li><img src="img/2.jpg" width="400" height="200" /></li>
<li><img src="img/3.jpg" width="400" height="200" /></li>
</ul>
</div>
*{margin:0; padding:0;}
body{padding:100px;}
#roll_box{position:relative; width:400px; height:200px; overflow:hidden;}
#roll_box ul{position:relative; display: block; width:1200px;}
#roll_box ul li{float:left; list-style:none; font-size:0; width:400px; height:200px;}
#roller{position:absolute; z-index:9; bottom:5px; right:5px; width:50px;}
#roller a{display:block; float:left; width:10px; height:18px; margin-left:6px; background:#fff}
#roller .cur_class{background:#ff0}
var roll = function(id, width, curClass){
var rollEle = document.getElementById(id);
var ulEle = rollEle.getElementsByTagName('ul')[0];
var rollLi = rollEle.getElementsByTagName('li');
var rollLength = rollLi.length; //图片数量
var curIndex = 0; //新的index
var ulTimer = null; //间隔时间变量
var ulTime = 3000; //间隔时间
var liTimer = null;
var liTime = 10; //每次执行滚动时间
var rollPx = 30; //每次执行滚动间距
var leftPx = 0;
var targetPx = 0;
var rollerAEle = null;
var easing = 0.04; //缓动参数

var appendRoller = function(){
var rollerBox = document.createElement('div');
rollerBox.setAttribute('id', 'roller');
for(var i=0; i<rollLength; i++){
var aEle = document.createElement('a');
aEle.setAttribute('href', '#none');
aEle.innerHTML = i;
rollerBox.appendChild(aEle);
}
rollEle.appendChild(rollerBox);
rollerAEle = document.getElementById('roller').getElementsByTagName('a');
rollerAEle[0].setAttribute('class', 'cur_class'); //添加当前选中样式

for(var i=0; i<rollerAEle.length; i++){
rollerAEle[i].onmouseover = (function(i){
return function(){
if(liTimer){
clearInterval(liTimer);
liTimer = null;
}
if(ulTimer){
clearInterval(ulTimer);
ulTimer = null;
}
curIndex = i;
makeRoll();
}
})(i);
rollerAEle[i].onmouseout = function(){
autoRoll();
}
}
}

var moveLeft = function(){
if(leftPx >= targetPx){
var moveLeftPx = (leftPx - targetPx)*easing; //test
if(moveLeftPx<1){
moveLeftPx = 1;
}
leftPx -= moveLeftPx; //test
//leftPx -= rollPx;
ulEle.style.left = leftPx+'px';
//console.log(ulEle.style.left);
} else {
ulEle.style.left = targetPx+'px';
clearInterval(liTimer);
liTimer = null;
}
};

var moveRight = function(){
if(leftPx <= targetPx){
var moveRightPx = (targetPx - leftPx)*easing; //test
if(moveRightPx<1){
moveRightPx = 1;
}
leftPx += moveRightPx; //test
//leftPx += rollPx;
ulEle.style.left = leftPx+'px';
} else {
ulEle.style.left = targetPx+'px';
clearInterval(liTimer);
liTimer = null;
}
}

var makeRoll = function(){
for(var i=0; i<rollLength; i++){
rollerAEle[i].setAttribute('class', '');
}
rollerAEle[curIndex].setAttribute('class', 'cur_class'); //添加当前选中样式
leftPx = parseInt(ulEle.style.left.replace('px','')? ulEle.style.left.replace('px','') : 0,10);
targetPx = -(curIndex * width);
//console.log(targetPx +":"+leftPx)
if(leftPx > targetPx) {
liTimer = setInterval(moveLeft,liTime);
} else {
liTimer = setInterval(moveRight,liTime);
}
}

var autoRoll = function(){
ulTimer = setInterval(function(){
curIndex++;
if(curIndex == rollLength){
curIndex = 0;
}
makeRoll(curIndex);
},ulTime)
//如为当前选中则返回
/*curIndex++;
if(curIndex == rollLength){
curIndex = 0;
}
makeRoll();*/
}

var init = function(){
appendRoller();
autoRoll();
}

init();
}roll('roll_box', '400', 'cur_class')