jQuery有一个animate的函数，我想用原生JavaScript实现，并且运用在幻灯片轮播上，开始点击左边的按钮是正常的，第二次点击开始出现元素的长宽位置一直在跳动，找不出原因,继续轮播图片发生错位。我觉得应该是我写的animate函数有问题，但是不知道哪有问题

js代码

;(function(){
    var Carousel=function(poster){
        var _this_=this;
        this.poster=poster;
        this.posterItemMain=poster.getElementsByClassName("poster-item");
        this.firstPoster=this.posterItemMain[0];
        this.lastPoster=this.posterItemMain[this.posterItemMain.length-1];
        this.prePoster=this.firstPoster;
        this.nextBtn=poster.getElementsByClassName("poster-next-btn")[0];
        this.preBtn=poster.getElementsByClassName("poster-prev-btn")[0];
        this.rotateFlag=true;//防止点击事件叠加
        this.setting={
            "width":1000,
            "height":270,
            "posterWidth":640,
            "posterHeight":270,
            "scale":0.9,
            "speed":500,
            "deLay":5000,
            "auto":false,
            "verticalAlign":"middle"
        };
        this.setSettingValue();
        this.setPosterPos();

        //自动播放
        if(this.setting.auto){
            this.autoPlay();
            this.poster.onmouseover=function(){
                clearInterval(_this_.timer);
            }
            this.poster.onmouseout=function(){
                _this_.autoPlay();
            }
        }
        
        
        this.nextBtn.onclick=function(){
            if(_this_.rotateFlag){

                _this_.rotateFlag=false;
                _this_.rotate("right");
            };
            
        }
        this.preBtn.onclick=function(){
            if(_this_.rotateFlag){
                _this_.rotateFlag=false;
                _this_.rotate("left");
            }
        }
    };
    Carousel.prototype={
        setVertical:function(height){
            var top;
            if(this.setting.verticalAlign=="top"){
                top=0;
            }else if(this.setting.verticalAlign=="middle"){
                top=parseInt((this.setting.height-height)/2);
            }else if(this.setting.verticalAlign=="bottom"){
                top=this.setting.height-height;
            }else{
                top=parseInt((this.setting.height-height)/2);
            }
            return top;
        },
        autoPlay:function(){
            var self=this;
            this.timer=setInterval(function(){
                $(self.nextBtn).click();
                },self.setting.deLay);
        },
        //旋转
        rotate:function(str){
            var _this_=this;
            if(str=="right"){
                for(var i=0;i0&&obj.clientWidth>=data.width){
                        obj.style.width=data.width+"px";
                        flag1=true;
                    }
                    if(height<=0&&obj.clientHeight<=data.height){
                        obj.style.height=data.height+"px";
                        flag2=true;
                    }else if(height>0&&obj.clientHeight>=data.height){
                        obj.style.height=data.height+"px";
                        flag2=true;
                    }
                    if(top<=0&&obj.offsetTop<=data.top){
                        obj.style.top=data.top+"px";
                        flag3=true;
                    }else if(top>0&&obj.offsetTop>=data.top){
                        obj.style.top=data.top+"px";
                        flag3=true;
                    }
                    if(left<=0&&obj.offsetLeft<=data.left){
                        obj.style.left=data.left+"px";
                        flag4=true;
                    }else if(left>0&&obj.offsetLeft>=data.left){
                        obj.style.left=data.left+"px";
                        flag4=true;
                    }
                    if(opacity<=0&&parseFloat(obj.style.opacity)<=data.opacity){
                        obj.style.opacity=data.opacity;
                        flag5=true;
                    }else if(opacity>0&&parseFloat(obj.style.opacity)>=data.opacity){
                        obj.style.opacity=data.opacity;
                        flag5=true;
                    }
                    if(obj.style.zIndex!=data.zIndex){
                        obj.style.zIndex=data.zIndex
                    }
                    if(flag1&&flag2&&flag3&&flag4&&flag5){
                        clearInterval(timer);
                        callback();

                    }
            },50);
            
        },
        //设置参数
        setSettingValue:function(){
            this.poster.style.width=this.setting.width+"px";
            this.poster.style.height=this.setting.height+"px";
            this.firstPoster.style.width=this.setting.posterWidth+"px";
            this.firstPoster.style.height=this.setting.posterHeight+"px";
            var bw=parseInt((this.setting.width-this.setting.posterWidth)/2);
            this.preBtn.style.width=bw+"px";
            this.preBtn.style.height=this.setting.height+"px";
            this.nextBtn.style.width=bw+"px";
            this.nextBtn.style.height=this.setting.height+"px";
            this.firstPoster.style.left=bw+"px";
            this.firstPoster.style.top=this.setVertical(this.firstPoster.offsetHeight);
            this.firstPoster.style.opacity=1;
            console.log("right:"+this.firstPoster.style.right);
        },
        setPosterPos:function(){
            var objs=Array.prototype.slice.call(this.posterItemMain);
            var size=(this.posterItemMain.length-1)/2;
            console.log(size);
            this.firstPoster.style.zIndex=size+1;
            var    rightPoster=objs.slice(1,size+1);
            var    leftPoster=objs.slice(size+1);
            var    posterSpace=parseInt((this.setting.width-this.setting.posterWidth)/(2*size));
                var rw=this.setting.posterWidth;
                var rh=this.setting.posterHeight;
                var rl=parseInt((this.setting.width-this.setting.posterWidth)/2);
                var rr=parseInt((this.setting.width-this.setting.posterWidth)/2);
                var rt=this.setVertical(rh);;
                var level=1;
                var zindex=size+1;
                for(var i=0;i