<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
border:1px solid red;
width:218px;
height:290px;
margin:50px auto;
}
.show{
display:inline-block;
}
.hide{
display:none;
}
img{
width:218px;
}
</style>
<script>
//页面加载后
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 onmouseover="stop();"
onmouseout="lunbo();">
<img src="../image/01.jpg" />
<img src="../image/02.jpg" class="hide"/>
</div>
</body>
</html>
js轮播图的实现
猜你喜欢
转载自blog.csdn.net/kxj19980524/article/details/84857083
今日推荐
周排行