效果截图：

HTML代码：

    <div id="container">
        <img src="images/photo01.jpg" alt="">
        <img src="images/photo02.jpg" alt="">
        <img src="images/photo03.jpg" alt="">
        <img src="images/photo04.jpg" alt="">
    </div>

 

CSS样式：

*{
    margin: 0; padding: 0;
}
#container{
    margin: 30px auto; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 420px; overflow: hidden;
    font-size: 0; position: relative;
}
#container img{
    display: block;width: 420px; height: 420px; position: absolute; left: 0; top: 0; border-top: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

 

JS代码：

window.onload=function(){
    //获取图片容器
    var oBox=document.getElementById(\'container\');

    //获取图片
    var aImgs=document.getElementsByTagName(\'img\');

    //获取单张图片宽度
    var oImgWidth=aImgs[0].offsetWidth;

    //定义显露宽度
    var oInitWidth=160;

    //设置图片容器宽度
    oBox.style.width=oImgWidth + oInitWidth*(aImgs.length-1)+\'px\';

    //初始化图片位置
    function initImgPos(){
        for(var i = 1; i < aImgs.length; i++){ //由于第一张图片不需要设置，i从1开始
            aImgs[i].style.left=oImgWidth + oInitWidth*(i-1) + \'px\';
        }        
    }
    //初始化执行一次
    initImgPos()

    //定义鼠标滑过每个图片应移动的距离
    var translate=oImgWidth - oInitWidth;

    //鼠标滑动效果
    for (var i = 0; i < aImgs.length; i++) {
        // 使用立即执行函数，获得不同i的值
        (function(i){
            aImgs[i].onmouseover=function(){
                // 复位
                initImgPos();

                //重新计算位置
                for(var j = 1; j <= i; j++){
                    aImgs[j].style.left=parseInt(aImgs[j].style.left,10) - translate  + \'px\';
                }
            }
        })(i)
    }

}

 

笔记来源：慕课网：DOM探索之基础详解篇