JavaScript_Window对象和Document对象

最新推荐文章于 2020-01-18 22:36:10 发布

越前

最新推荐文章于 2020-01-18 22:36:10 发布

阅读量304

点赞数

分类专栏： web开发文章标签： web 前端 javascript 网页 js

本文链接：https://blog.csdn.net/zhouzhenchina/article/details/76472811

版权

web开发专栏收录该内容

40 篇文章 0 订阅

订阅专栏

2017年7月31日学习总结

一个小案例

图片轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hw2</title>
<style>
div{
border:1px solid blue;
width:218px;
height:218px;
margin:0 auto;
}
.hide{
display:none;
}
</style>
<script>
window.onload = function(){
start();
}
var id;
var n = 0;
function start(){
id = setInterval(function(){
n++
var imgs = document.getElementsByTagName("img");
for(var i=0;i<imgs.length;i++){
imgs[i].className = "hide"
}
var next = n%imgs.length;
imgs[next].className = "display";
},2000);
}
function stop(){
clearInterval(id);
}
</script>
</head>
<body>
<div οnmοuseοver="stop();" οnmοuseοut="start();">
<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>

网页运行结果
每2秒换一张图片，鼠标放在图片上停止，
鼠标离开图片范围，继续轮播。