JS问题：图片滑动门效果实现有Bug

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

<!DOCTYPE HTML>
<html>
    <head>
        <title>京东首页</title>
        <meta charset="utf-8" />
    <style>
        #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;
        }
    </style>
        <script src="imgs.js"></script>
    </head>
    <body>
        <div id="box">
            <img src="image1.jpg">
            <img src="image1.jpg">
            <img src="image1.jpg">
            <img src="image1.jpg">
            <img src="image1.jpg">
        </div>
    </body>
</html>
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<len;i++){
            imgs[i].style.left=this.WSIZE+this.HIDEIMG*(i-1)+"px";
            console.log(imgs[i].style.left);
            }
        },
}
window.onload=function (){
    door.init();
}

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

【热门文章】