手風琴輪播圖

代碼：

<style>
  ul {
    list-style: none;
  }
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 1150px;
    height: 400px;
    margin: 50px auto;
    border: 1px solid red;
    overflow: hidden;
  }

  div li {
    width: 240px;
    height: 400px;
    float: left;
  }

  div ul {
    width: 1300px;
  }
</style>  
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  //獲取樣式
  function getStyle(element,attr) {
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
  }
  //變速動畫 更改多個屬性的值
  function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;
      for(var attr in json){
        var current=parseInt(getStyle(element,attr));
        var target=json[attr];
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;
        element.style[attr]=current+"px";
        if(current!=target){
          flag=false;
        }
      }
      if(flag){
        clearInterval(element.timeId);
        if(fn){
          fn();
        }
      }
    },20);
  }

  var liObjs=document.getElementById("box").children[0].children;
  for(var i=0;i<liObjs.length;i++){
    liObjs[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
    liObjs[i].onmouseover=mouseoverHandle;
    liObjs[i].onmouseout=mouseoutHandle;
  }
  function mouseoverHandle(){
    for(var i=0;i<liObjs.length;i++) {
      animate(liObjs[i], {"width": 100});
    }
      animate(this,{"width":800});
  }
  function mouseoutHandle(){
    for(var i=0;i<liObjs.length;i++){
      animate(liObjs[i],{"width":240});
    }
  }
</script>

備註： 圖片命名方式爲 num.jpg 格式 且從一開始 如，1.jpg，2.jpg等
效果圖：