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

<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')