图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			 $(function(){
			 	
			 	$("#p1").click(function(){
			 		$("#photo").src="img/3.jpg";
			 	})
			 	
			 	$("#p2").click(function(){
			 		$("#photo").src="img/1.gif";
			 	})
			 	
			 	$("#p3").click(function(){
			 		$("#photo").src="img/3.jpg";
			 	})
			 	
			 	$("#p4").click(function(){
			 		$("#photo").src="img/1.gif";
			 	})
			 	
			 	$("#p5").click(function(){
			 		$("#photo").src="img/3.jpg";
			 	})
			 	
			 	$("#p6").click(function(){
			 		$("#photo").src="img/1.gif";
			 	})
			 	
			 	$("#p7").click(function(){
			 		$("#photo").src="img/3.jpg";
			 	})
			 	
			 });
		</script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 1500px;
			height: 900px;
		}
		li{
			list-style-type: none;
			float: left;
			color: brown;
			width: 214px;
			text-align: center;
		}
		li:hover{
			background-color: red;
			font-size: larger;
			color: yellow;
			border-radius: 5px;
		}
		#content{
			width: 1500px;
			height: 900px;
		}
		a{
			
			text-decoration: none;
			color: brown;
			
		}
		
		.img1 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
		
		.img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
		
	</style>
	<body>
		<div id="box">
			<div id="header">
				<img src="img/3.jpg" width="1500px" class="img1"/>
			</div>
			<div id="nav">
				<ul>
					<li><a href="#" id="p1">首页</a></li>
					<li><a href="#" id="p2">河南要闻</a></li>
					<li><a href="#" id="p3">政府信息公开</a></li>
					<li><a href="#" id="p4">专题专栏</a></li>
					<li><a href="#" id="p5">政务服务</a></li>
					<li><a href="#" id="p6">互动交流</a></li>
					<li><a href="#" id="p7">河南概况</a></li>
				</ul>
			</div>
			<div id="content">
				<img src="img/4.png" width="1500px" id="photo"/>
				
			</div>
			
		</div>
	</body>
</html>
猜你喜欢
