JS_轮播案例
Posted dahua7758521
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS_轮播案例相关的知识，希望对你有一定的参考价值。
<!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_轮播案例的主要内容，如果未能解决你的问题，请参考以下文章