简易图片轮播实现-优快云博客

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>简单图片轮播</title>
  
  <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.οnlοad=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.οnmοuseοver=function(){
     clearInterval(timer);
    };
    wrap.οnmοuseοut=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>