图片的切换

最新推荐文章于 2022-10-25 15:30:42 发布

zwz19920209

最新推荐文章于 2022-10-25 15:30:42 发布

阅读量286

点赞数

分类专栏：课堂笔记

本文链接：https://blog.csdn.net/zwz19920209/article/details/38701043

版权

课堂笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style type="text/css">
			#div1{
				width:450px;
				height:250px;
				border:1px solid  #C404DD;
			}
		#i1,#i2,#i2,#i3{
			display: none;
		}	
		#s1{	
			width:13px;
			border: 1px solid red;
			position: absolute;
			left: 390px;
			top: 240px;
			background-color: red;
			color: white;
		}
			#s2{
			width:13px;	
			border: 1px solid red;
			position: absolute;
			left: 407px;
			top: 240px;
			background-color: red;
			color: white;
		}
			#s3{	
			width:13px;
			border: 1px solid red;
			position: absolute;
			left: 424px;
			top: 240px;
			background-color: red;
			color: white;
		}
			#s4{	
			width:13px;
			border: 1px solid red;
			position: absolute;
			left: 441px;
			top: 240px;
			background-color: red;
			color: white;
		}
		</style>
		
		<script type="text/javascript">
			var i=1;
			function doGo(){
				//隐藏所有图片
				for (var j = 1; j<=4; j++){
				  	var strI="i"+j;
				  	var strS="s"+j;			  		
			  	document.getElementById(strI).style.display="none";
			  	document.getElementById(strS).style.backgroundColor="red";
				}
				//改变所有显示的图片序号
				i++;
				if(i>4){
					i=1;
				}	
				var value="i"+i;
				var b="s"+i;
				//显示新的图片
				document.getElementById(b).style.backgroundColor="pink";
				document.getElementById(value).style.display="block";
				var time =window.setTimeout("doGo()",3000);
			}
			function domousedown(i1){
				
			for (var j = 1; j<=4; j++){
				  	var strI="i"+j;
				  	var strS="s"+j;			  
				  	//隐藏所有图片		
			  		document.getElementById(strI).style.display="none";
			  		//所有数字背景色设为红
			  		document.getElementById(strS).style.backgroundColor="red";
				}
				//显示点击的图片
				document.getElementById(i1).style.display="block";
				//改变所点点击的数字背景色
				switch(i1){
					case "i1":i=1;break;
					case "i2":i=2;break;
					case "i3":i=3;break;
					case "i4":i=4;break;
				}
				var b="s"+i;
				//点击的数字的背景色设为粉红
				document.getElementById(b).style.backgroundColor="pink";
			
			}
		</script>
	</head>
	<body οnlοad="doGo()">
		<div id="div1">
			<span id="s1" οnmοusedοwn="domousedown('i1')">1</span>
			<span id="s2" οnmοusedοwn="domousedown('i2')">2</span>
			<span id="s3" οnmοusedοwn="domousedown('i3')">3</span>
			<span id="s4" οnmοusedοwn="domousedown('i4')">4</span>
			<img id="i1" src="i1.jpg" />
			<img id="i2" src="i2.jpg" />
			<img id="i3" src="i3.jpg" />
			<img id="i4" src="i4.jpg" />
			
		</div>
	</body>
</html>