<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">.show{ display: inline-block;}.hide{ display: none;} div{ border: 1px solid red; width: 218px; height: 218px; margin: 50px auto; }</style><script type="text/javascript"> //页面加载后 window.οnlοad=function(){ lunbo(); } //轮播 var id; var n=0;//轮播次数 function lunbo() { //启动定时器 id=setInterval(function() { n++; //获取所有图片 var imgs=document.getElementsByTagName("img"); //将所有图片隐藏 for(var i=0;i<imgs.length;i++){ imgs[i].className="hide"; } //将下一张图片显示 var index=n%imgs.length; imgs[index].className="show"; }, 2000);} function stop() { clearInterval(id);}</script></head><body><!-- hover不是事件，是伪类选择器！ onmouseover是鼠标悬停事件 onmouseout是鼠标离开事件 --> <div οnmοusemοve="stop();" οnmοuseοut="lunbo();"> <img src="../images/01.jpg" > <img src="../images/02.jpg" class="hide"> <img src="../images/03.jpg" class="hide"> <img src="../images/04.jpg" class="hide"> <img src="../images/05.jpg" class="hide"> <img src="../images/06.jpg" class="hide"> </div></body></html>