js手风琴动画效果

首先设置好html和css的样式,如下:

html代码 :

<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

css样式 : 

<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;
  }

js代码如下 : 

<script>
      var list = f("box").getElementsByTagName("li");  //获取li
      //给每个li设置背景图片,鼠标移入移出事件
      for (var i=0;i<list.length;i++){
          list[i].style.backgroundImage = "url(images/" +