JavaScript_Window对象和Document对象
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秒换一张图片，鼠标放在图片上停止，
鼠标离开图片范围，继续轮播。