实现简单的图片轮播功能

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>简单图片轮播</title>
  <!--
         原理：三张图片垂直放置，显示区域li固定,获取当前图片的index，
         每隔2秒将下张图片的margin-top向上移动图片的高度，即将该图片上移到显示区域
        -->
  <style>
   *{
    list-style-type: none;
   }
   .wrap{
    width: 250px;
    height: 250px;
    position: relative;
    left:30%;
    overflow: hidden;
    border: solid 1px red;
    cursor: pointer;
   }
   .wrap ul{
    margin: 0;
    padding: 0;
   }
   .wrap ul li{
    width: 250px;
    height: 250px;
   }
   .wrap ul li img{
    width:100%;
    height: 100%;
   }
  </style>
  <script>
   window.onload=function(){
    var wrap=document.getElementById("wrap");
    var pic=document.getElementById("pic");
    var list=pic.getElementsByTagName("li");
    var index=0;
    var timer=null;
    function play(){
     timer=setInterval(function(){
     pic.style.marginTop=-250*index+'px';
     index++;
     if(index>=list.length){
      index=0;
     }
    },1000);
    }
    play();
    wrap.onmouseover=function(){
     clearInterval(timer);
    };
    wrap.onmouseout=function(){
     play();
    };
   }
  </script>
 </head>
 <body>
  <div class="wrap" id="wrap">
   <ul id="pic">
    <li><img src="img/1.jpg"/></li>
    <li><img src="img/2.jpg"/></li>
    <li><img src="img/3.jpg"/></li>
   </ul>
  </div>
  <p></p>
 </body>
</html>
实现简单的图片轮播功能

推荐阅读
