JavaScript_Window对象和Document对象
2017-07-31 21:32
525 查看
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 onmouseover="stop();" onmouseout="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秒换一张图片,鼠标放在图片上停止,
鼠标离开图片范围,继续轮播。
相关文章推荐
- JavaScript的document和window对象详解
- javascript 对象(DOM)document window history
- document.body ,window.screen javascript对象属性取值意义
- JavaScript――DOM操作――Window.document对象详解
- [转载 js]document.body ,window.screen javascript对象属性取值意义
- Javascript中window对象、document对象的属性和方法(转)
- JavaScript的document和window对象详解
- JavaScript常用内置对象(window、document、form对象)
- document.body ,window.screen javascript对象属性取值意义
- JavaScript的document和window对象详解
- JavaScript之外部对象概述、window对象、document对象
- [转载 js]document.body ,window.screen javascript对象属性取值意义
- JavaScript的document和window对象详解
- JavaScript入门<3>JS外置对象:Window、Document对象与DOM实例详解
- Javascript的document,window对象(DOM)
- JavaScript的document和window对象详解
- JavaScript的document和window对象详解
- Javascript的document,window对象(DOM)
- JavaScript的document对象和window对象详解
- js关于document和window对象_javascript教程