<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单图片轮播</title> <!-- 原理：三张图片垂直放置，显示区域li固定,获取当前图片的index， 每隔2秒将下张图片的margin-top向上移动图片的高度，即将该图片上移到显示区域 --> <style> *{ list-style-type: none; } .wrap{ 250px; height: 250px; position: relative; left:30%; overflow: hidden; border: solid 1px red; cursor: pointer; } .wrap ul{ margin: 0; padding: 0; } .wrap ul li{ 250px; height: 250px; } .wrap ul li img{ 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>