<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta name="generator" content="Bluefish 2.0.2" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>上机练习——图片转换</title>
<!-- 第三章练习2011-05-20 -->
<script type="text/javascript" >
//图片名称数组
var imgs = ["class1-1.jpg","class1-2.jpg","class1-3.jpg","class1-4.jpg","class1-5.jpg"];
//数组下标
var count = 0;
//时间控件对象
var tmr;
//切换图片
function ChangeImgs(){
showImg.src = imgs[count++];
//验证下标是否越界
if(count == imgs.length)
count = 0;
//循环
tmr = setTimeout("ChangeImgs()",1000);
}
//鼠标玄停时暂停图片
function PauseImgs(index){
showImg.src = imgs[index];
count = index;
clearTimeout(tmr);
}
</script>
<style type="text/css">
.divA{
position:absolute;
left:20px;
top:160px;
50px;
height:50px;
font-size: 36px;
z-index:1;
}
.divB{
position:absolute;
left:70px;
top:160px;
50px;
height:50px;
font-size: 36px;
z-index:2;
}
.divC{
position:absolute;
left:120px;
top:160px;
50px;
height:50px;
font-size: 36px;
z-index:3;
}
.divD{
position:absolute;
left:170px;
top:160px;
50px;
height:50px;
font-size: 36px;
z-index:4;
}
.divE{
position:absolute;
left:220px;
top:160px;
50px;
height:50px;
font-size: 36px;
z-index:5;
}
</style>
</head>
<body onload = "ChangeImgs()">
<img id="showImg" src="class1-1.jpg" />
<div class="divA" onmouseover="PauseImgs(0)" onmouseout="ChangeImgs()">1</div>
<div class="divB" onmouseover="PauseImgs(1)" onmouseout="ChangeImgs()">2</div>
<div class="divC" onmouseover="PauseImgs(2)" onmouseout="ChangeImgs()">3</div>
<div class="divD" onmouseover="PauseImgs(3)" onmouseout="ChangeImgs()">4</div>
<div class="divE" onmouseover="PauseImgs(4)" onmouseout="ChangeImgs()">5</div>
</body>
</html>