仿苹果列表显示

function Carousel(id,num,prev,next,li_width){
    var oBox=document.getElementById(id);
    this.aLi=oBox.getElementsByTagName('li');
    this.n=num;
    this.Width=li_width;
    this.prev=document.getElementById(prev);
    this.next=document.getElementById(next);
    for(var i=0;i<this.aLi.length;i++){
        this.aLi[i].style.position='absolute';
        this.aLi[i].style.left=li_width*i+'px';
    }
    this.x=0;
    this.bind();
}
Carousel.prototype={
    getEle:function(direction){
        var arr=[];
        for(var i=0;i<this.aLi.length;i++){
            if(i>=(direction*this.n-this.n)/2+this.x*this.n&&i<(direction*this.n-this.n)/2+(this.x+2)*this.n){
                arr.push(this.aLi[i]);
            }else{
                this.aLi[i].style.left=this.aLi[i].offsetLeft-direction*this.n*this.Width+'px';
            }
        }
        return arr;
    },
    StartMove:function(direction){
        this.unbind();
        var arr=this.getEle(direction);
        var loop=0;
        var i=(direction==1)?this.n-1:this.n;
        var _this=this;
        var Timer=setInterval(function(){
            loop++;
            if(loop==arr.length+1){
                clearInterval(Timer);
                setTimeout(function(){
                    _this.bind();
                },1212); //定时器*滑动时间
            }else{
                var num=arr[i].offsetLeft-direction*_this.n*_this.Width;
                _this.animate(arr[i],num);
                if(direction==1){
                    i--;
                    if(i<0){i=arr.length-1;}
                }else{
                    i++;
                    if(i==arr.length){i=0;}
                }
            }
        },30); //每个之间的滑动间隔
        return false;
    },
    bind:function(){
        var _this=this;
        this.prev.onclick=function(){
            if(_this.x>0){
                _this.StartMove(-1);
                _this.x--;
            }
        };
        var Maxx=Math.ceil(this.aLi.length/this.n)-1;
        this.next.onclick=function(){
            if(_this.x<Maxx){
                _this.StartMove(1);
                _this.x++;
            }
        };
        if(this.x==0){
            this.prev.className='top_link_none';
            this.next.className='';
        }else if(this.x==Maxx){
            this.next.className='top_link_none';
            this.prev.className='';
        }else{
            this.prev.className='';
            this.next.className='';
        }
        return false;
    },
    unbind:function(){
        this.prev.onclick=null;
        this.next.onclick=null;
        return false;
    },
    animate:function(obj,num){
        var speed=0;
        var timer=setInterval(function(){
            speed+=(num-obj.offsetLeft)/5; //滑动摩擦力
            speed=speed*0.6; //滑动速度
            if(Math.abs(speed)<2){
                speed=speed>0?1:-1;
            }
            obj.style.left=parseInt(obj.style.left)+speed+"px";
            if(obj.offsetLeft==num){
                clearInterval(timer);
                obj.style.left=num+"px";
            }
        },25) //移动速度
    }
}

使用方法:new Carousel(UL的ID,LI一次显示个数,PREV按钮的ID,NEXT按钮的ID,每个LI的宽度);

例new Carousel('box',6,'prev','next',100);

需要方向相反的话:

StartMove:function(direction){
        this.unbind();
        var arr=this.getEle(direction);
        var loop=0;
        var i=(direction==1)?0:arr.length-1;
        var _this=this;
        var Timer=setInterval(function(){
            loop++;
            if(loop==arr.length+1){
                clearInterval(Timer);
                setTimeout(function(){
                    _this.bind();
                },400);
            }else{
                var num=arr[i].offsetLeft-direction*_this.n*_this.Width;
                _this.animate(arr[i],num);
                if(direction==1){
                    i++;
                }else{
                    i--;
                }
            }
        },20);
        return false;
    }

数值自己改吧.

动画过程改成CSS3的更加流畅看起来也更舒服.