自动跳动滑动门html,JS问题：图片滑动门效果实现有Bug

小弟刚入门编程，在网上看到一个javascript实现图片滑动门效果，自己尝试着用面向对象的方式重做了一遍，可是效果却有问题，希望大神帮忙看看，哪里出问题了。

html代码

京东首页

#box{

height:292px;

margin:0 auto;

border-right:1px solid #ccc;

border-bottom:1px solid #ccc;

overflow:hidden;

position:relative;

}

#box img{

position:absolute;

display:block;

left:0;

border-left:1px solid #ccc;

}

javascript 代码

var door={

WSIZE:0,//单张图片的宽度

DSIZE:0,//整个div的宽度

HIDEIMG:100,//图片掩藏的宽度

translate:0,

init:function(){

//找到id为box下的所有img,保存在变量img中

var imgs=box.getElementsByTagName("img");

console.log(imgs);

//获取单张图片的宽度保存在WSIZE中

//this.WSIZE=getComputedStyle(img[0]).width;

this.WSIZE=imgs[0].offsetWidth;

console.log(this.WSIZE);

//设置box的宽度为HIDEIMG*3+单张图片的宽度WSIZE

box.style.width=this.WSIZE+this.HIDEIMG*(imgs.length-1)+"px";

console.log(box.style.width);

//调用初始化位置

this.setImgsPos();

//计算图片打开时移动的距离

this.translate=this.WSIZE-this.HIDEIMG;

console.log(this.translate);

//给id下所有的img元素绑定鼠标移入事件

box.addEventListener("mouseover",this.slide.bind(this));

},

slide:function(e){

var target=e.target;

if(target.nodeName=="IMG"){

this.setImgsPos();

target.style.left=parseInt(target.style.left)-this.translate+"px";

}

},

setImgsPos:function(){//图片初始化位置

var imgs=box.getElementsByTagName("img");

for(var i=1,len=imgs.length;i

imgs[i].style.left=this.WSIZE+this.HIDEIMG*(i-1)+"px";

console.log(imgs[i].style.left);

}

},

}

window.οnlοad=function (){

door.init();

}

当我移动第三张图片的时候它会把第二张图片给遮住了 实在是想不明白了！