<!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.onload=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 onmousemove="stop();"
???onmouseout="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>
JS_轮播案例
原文地址：http://www.cnblogs.com/Bighua123/p/7635874.html