图片定时变换--第三章练习 

<!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;
				width:50px;
				height:50px;
				font-size: 36px;
				z-index:1;
			}
			.divB{
				position:absolute;
				left:70px;
				top:160px;
				width:50px;
				height:50px;
				font-size: 36px;
				z-index:2;
			}
			.divC{
				position:absolute;
				left:120px;
				top:160px;
				width:50px;
				height:50px;
				font-size: 36px;
				z-index:3;
			}
			.divD{
				position:absolute;
				left:170px;
				top:160px;
				width:50px;
				height:50px;
				font-size: 36px;
				z-index:4;
			}
			.divE{
				position:absolute;
				left:220px;
				top:160px;
				width: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>

posted on 2011-05-20 19:27  0xCAFEBABE  阅读(293)  评论(0)  编辑  收藏  举报

导航