js推拉门

style代码

#box{
            height:200px;
            border-right:1px solid #ccc;
            border-bottom:1px solid #ccc;
            position:relative;
            overflow:hidden;
        }
        #box img{
            position:absolute;
            border-left:1px solid #ccc;
            display:block;
            left:0;
        }

body代码（记得把图片换成自己的图片）

<div id="box">
    <img src="image/1.png" >
    <img src="image/2.png" >
    <img src="image/3.png" >
    <img src="image/4.png" >
    <img src="image/5.png" >
    <img src="image/6.png" >
</div>

js代码

window.onload = function(){
        var box = document.getElementById("box");  //获得容器对象
        var imgs = box.getElementsByTagName("img");  //获得图片对象数组
        imgWidth = imgs[0].offsetWidth;  //图片宽度
        var exposeWidth = 100;  //每张图片露出的宽度
        var boxWidth = imgWidth + exposeWidth * (imgs.length - 1);//盒子宽度
        box.style.width = boxWidth + "px";
        //初始化图片位置
        function reset(){
            for(var i=1; i<imgs.length; i++){
                imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px";
            }
        }
        reset()     ;
        //开门时候每个图片应该左移的距离  图片宽度 - 每张图片露出的宽度
        var translate = imgWidth - exposeWidth;
        //为每个图片添加事件
        for(var i = 0; i < imgs.length; i ++){
            //自动执行函数
            (function(i){
                imgs[i].onmouseover = function(){
                    //重置图片位置
                    reset();
                    for(var j = 1; j <= i; j ++){
                        imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px";
                    }
                };
            })
            (i);
        }
    };