手风琴效果

效果图

以下是代码：

html文件

<ul>
    <li>![](img/5.jpg)</li>
    <li>![](img/7.jpg)</li>
    <li>![](img/8.jpg)</li>
    <li>![](img/9.jpg)</li>
    <li>![](img/3.jpg)</li>
    <li>![](img/1.jpg)</li>
</ul>

css文件

* {
    padding: 0;
    margin: 0;
}
body {
    background: #ccc;
    width: 1108px;
    margin: 30px auto;
}
ul {
    width: 1100px;
    border: 4px solid #fff;
    border-radius: 16px;
    box-shadow: 0 0 10px 10px #fff;
    height: 300px;
    overflow: hidden;
    position: relative;}
li {
    list-style: none;
    position: absolute;
    height: 300px;
}
img {
    border: none;
    vertical-align: top;
    height: 300px;
    width: 600px;
}

js文件

var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
    if (i != 0) {
        aLi[i].style.left = 600 + (i - 1) * 100 + 'px';
    }
    aLi[i].index = i;
    aLi[i].onmouseover = function () {
        for(var j=0;j<aLi.length;j++){
            if(j<=this.index){
                startMove(aLi[j],{left:j*100})
            }else{
                startMove(aLi[j],{left:600 + (j - 1) * 100})
            }
        }
    }
}
function $(obj) {
    return document.getElementById(obj)
}
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr]
    } else {
        return getComputedStyle(obj)[attr] 
   }
}
function startMove(obj, json, fnEnd) {
    //每次调用的时候，就需要只有一个定时器在工作，（开始运动时候关闭所有定时器）
    //并且关闭或开启都是当前物体的定时器，防止与页面上其他定时器冲突，使每个定时器互不干扰。
    clearInterval(obj.timer); 
    obj.timer = setInterval(function () {
        var bStop = true; //假设所有的都已经到达目标了。
        for (var name in json) {
            var iTarget = json[name]; //所有的目标点
            if (name == "opacity") {
                var cur = parseInt(parseFloat(getStyle(obj, name)) * 100)            } else {
                var cur = parseInt(getStyle(obj, name));  //cur是当前移动的数值            } 
           var speed = (iTarget - cur) / 10;
            //物体运动的速度，数字越小运动的越慢。
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (name == "opacity") {
                obj.style.opacity = (cur + speed) / 100;
            } else if (name == 'zIndex') {
                obj.style[name] = cur + speed;
            } else {
                obj.style[name] = cur + speed + "px";
            }
            //某个值不等于目标点
            if (cur != iTarget) {
                bStop = false;
            }
        }
        if (bStop) {
            clearInterval(obj.timer);
            if (fnEnd) {
                fnEnd();
            }
        }
    }, 20)}