动态轮播图以及js期末大作业

最新推荐文章于 2022-08-11 11:10:27 发布

罗生门£

最新推荐文章于 2022-08-11 11:10:27 发布

阅读量2.2k

点赞数 7

分类专栏：编程文章标签： js javascript css3 html5 html

本文链接：https://blog.csdn.net/qq_44727672/article/details/103662336

版权

编程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

奔驰网站

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>梅赛德斯-奔驰</title>
	<link rel="bookmark" type="image/x-icon"  href="./images/title.ico"/>
		 		<link rel="shortcut icon" href="./img_png/奔驰 .ico"><!-- 左上角图标 -->
		 		<link rel="stylesheet" type="text/css" href="ding.css">
		 		<script type="text/javascript" src="ding.js"></script>
</head>
<body>
	<!-- 七个块， -->
	<div class="benchi" >
	<div class="fix" id="fix_A">
		<img src="img_png/客服.png" class="img_ding" />
		<div class="fix_two" id="img_li">
			<div class="imgkefu">
				<img src="img_png/弹框.png" alt="" />
			</div>
			<div>
				<input type="text" />
				<input type="button" value="发送" />
			</div>
		</div>
	</div>
		<div class="one" id="bc_one">
			<div class="one_lf"><!-- 导航栏左侧 -->
				<img src="img_png/奔驰1.png"  />
				<p class="a1">Merceds-Benz</p>
				<p class="a2">The best or nothing.</p>
				<!-- <p class="a3">|</p> -->
			</div>
			<div class="one_rg"><!--导航栏右侧  -->
				<!-- <p class="login">登录&nbsp;&nbsp;|&nbsp;&nbsp; 注册</p> -->
				<p class="login">登录|注册</p>
				<ul class="tab" >
				<!-- <a href="#"></a> -->
					<a href="#"><li id="li_one">车型</li></a>
					<a href="#"><li>购车指南</li></a>
					<a href="#"><li>客户服务</li></a>
					<a href="#"><li>Mercedes me</li></a>
					<a href="#"><li>梅赛德斯-AMG</li></a>
					<a href="#"><li>EQ</li></a>
					<a href="#"><li><img src="img_png/搜索.png"  /></li></a>
				</ul>
			</div>
		</div>
		<div class="li_a" id="li_div">
							<h1>购车指南</h1>
							<div class="buy_1">
								<ul>
									<li><img src="img/buy1.jpg" alt="" /></li>
									<li><img src="img/buy2.jpg" alt="" /></li>
									<li><img src="img/buy3.png" alt="" /></li>
									<li><img src="img/buy4.png" alt="" /></li>
								</ul>
								<ul>
									<li>
									<br />
									<h4>限时购车新方案</h4><br />
										<span>提供人性化的选车和购车方案,</span><br />
										<br /><span>让购车体验更多元，更轻松。</span>
									</li>
									<li>
										<br />
									<h4>查找经销商</h4><br />
										<span>根据服务项目及贩售车型,</span><br />
										<br /><span>筛选出符合您需求的经销商。</span>
								</li>
									<li>
										<br />
									<h4>金融计算器</h4><br />
										<span>提供各种弹性购车的新方案,</span><br />
										<br /><span>您可以根据预算来进行试算。</span>
									</li>
									<li>
										<br />
									<h4>预约试驾</h4><br />
										<span>选择您心仪的车型，联系经销商,</span><br />
										<br /><span>即刻体验梅赛德斯-奔驰。	</span>
									</li>
								</ul>
							</div>
						</div>
						<!-- 第二个——轮播图 -->
		<div class="box" id="scorr">
			<!-- 用来当作容器，固定死宽度 -->
				<div class="slider" id="sl">
				<!-- 这个用来放所有的照片，宽度定为100% -->
					<ul id="sl_ul">
					<!-- 这个ul就是那个长条，要长一点 -->
						<li><img src="img/1.jpg" alt=""></li>
						<li><img src="img/2.jpg" alt=""></li>
						<li><img src="img/3.jpg" alt=""></li>
						<li><img src="img/4.jpg" alt=""></li>
						<li><img src="img/5.jpg" alt=""></li>
						<li><img src="img/3.jpg" alt=""></li>
					</ul>
				</div>
				<!-- 这个ul是小原点，动态生成 -->
					<ul class="scorr_nav" id="sc_nav">
						<!-- <li class="a">0</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li> -->
					</ul>
					<!-- 左右切换键 -->
					<span class="arr arr_prev" id="prev"><</span>
					<span class="arr arr_next" id="next">></span>
				
			</div>
<!-- ________________________________________________________ -->

		<div class="three" >
		<div class="chexing">
			<p>———————————————————————————————</p> 
			 	<p class="llll">全部车型</p> 
			 <p>———————————————————————————————</p>
		</div>
			<div class="carstyle" >
				<ul>
					<li><img src="img/big1.png" class="pp" id="a1"  /></li>
					<li><img src="img/big2.png" class="pp" id="a2" /></li>
					<li><img src="img/big3.png" class="pp" id="a3" /></li>
					<li><img src="img/big4.png" class="pp" id="a4" /></li>
				</ul>
			</div>
		</div>
		<div class="four" >
			<div class="chexing2">
				<p>———————————————————————————————</p> 
				 	<p class="llll">购车工具</p> 
				 <p>———————————————————————————————</p>
			</div>
			<div class="carstyle2">
				<ul>
					<li><img src="img_png/定位.png" alt="" /></li>
					<li><img src="img_png/汽车.png" alt="" /></li>
					<li><img src="img_png/方向盘.png" alt="" /></li>
					<li><img src="img_png/购物车.png" alt="" /></li>
				</ul>
			</div>
			<div class="sizestle">
				<ul>
					<li>查找经销商</li>
					<li>车型比较</li>
					<li>预约试驾</li>
					<li>在线购车</li>
				</ul>
			</div>
		</div>
	<!-- ________________________________________________________ -->

		<div class="five" >
			<div class="chexing3">
				<p>———————————————————————————————</p> 
				 	<p class="llll">发现更多</p> 
				 <p>———————————————————————————————</p>
			</div>
			<div class="imgstyle">
				<img src="img/buy1.jpg" id="bigred" alt="" />
			</div>
		</div>
		<div class="six" >
			<div class="siximg">
				<img src="img/wumen.png"  class="ee" id="wumen_" alt="" />
				<img src="img/ihpone.png" class="ff" id="ipone_" alt="" />
			</div>
			<div class="siximg2">
				<img src="img/family.png" id="family_1" alt="" />
			</div>
			<div class="siximg3">
				<li>
					<img src="img/car1.png" class="ff" id="car_1"  />
				<li>
				<li>
					<img src="img/car2.png" class="ee" id="car_2"  />
				<li>
			</div>
			<div class="siximg4">
				<li>
					<img src="img/car3.png" class="ee" id="car_3" alt="" />
				</li>
				<li>
					<img src="img/book.png" class="ff" id="book" alt="" />
				<li>
			</div>
		</div>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
		<div class="seven">
			<div class="seven_A">
				<ul class="seven_one">
					<li class="seven_fs">车型</li>
					<li>轿车</li>
					<li>SUV</li>
					<li>轿跑车和敞篷跑车</li>
					<li>MPV</li>
					<li>新能源车</li>
					<li>车型总览</li>
				</ul>
				<ul class="seven_two">
					<li class="seven_fs">购车指南</li>
					<li>限时购车新方案</li>
					<li>查找经销商</li>
					<li>金融计算器</li>
					<li>预约试驾</li>
					<li>在线购车</li>
					<li>下载产品手册</li>
					<li>车型比较</li>
					<li>留学人员购车业务</li>
				</ul>
				<ul class="seven_three">
					<li class="seven_fs">客户服务</li>
					<li>星徽保养菜单</li>
					<li>原厂修养套餐家族</li>
					<li>手机端服务体现</li>
					<li>选装配件及精品</li>
					<li>原厂配件</li>
					<li>事故与保险服务</li>
					<li>24小时道路救援</li>
					<li>召回通知</li>
					<li>金融服务</li>
					<li>服务公约</li>
				</ul>
				<ul class="seveb_four">
					<li class="seven_fs">奔驰天下</li>
					<li>品牌介绍</li>
					<li>Mercedes me</li>
					<li>星友荟</li>
					<li>奔驰杂志</li>
					<li>奔驰新闻</li>
					<li>企业社会责任</li>
					<li>供应商信息平台</li>
					<li>环保信息查询</li>
				</ul>
			</div>
			<div class="seven_B">
				<p>———————————————————————————————————————————————————————————————</p>
				<ul>
					<li>Mercedes me</li>
					<li>星瑞认证二手车</li>
					<li>金融服务</li>
				</ul>
				<p class="ppp">———————————————————————————————————————————————————————————————</p>
			</div>
			<div class="seven_C">
				<p>关注我们</p>
				<ul>
					<li><img src="img_png/微信 (1).png" alt="" /></li>
					<li><img src="img_png/微博.png" alt="" /></li>
					<li><img src="img_png/知乎.png" alt="" /></li>
				</ul>
			</div>
			<div class="bottom">
				<p>©梅赛德斯-奔驰版权所有</p>
<p>网站地图&nbsp; 隐私政策&nbsp; 用户协议&nbsp; 京ICP备09046804号-2&nbsp; 法律声明&nbsp; 京公网安备&nbsp; 11010502035702号&nbsp;
投诉电话</p>
			</div>
		</div>
	</div>
</body>
</html>

这个是html代码

*{
	margin: 0;
	padding: 0;
}
.benchi{
	width: 100%;
	height: 100%;
	position: relative;
}
.fix{
	position: fixed;
	right: 0;
	bottom: 150px;
	z-index: 10;
}
.fix .img_ding{
	width: 50px;
	height: 50px;
}
.fix .fix_two{
	display: none;
}
.one{
	width: 100%;
	height: 160px;
	background-color: #2c2c2c;
	/* position: relative; */
}
.one .one_lf{
	width: 500px;
	height: 160px;
	float: left;
	/* background-color: #aaa; */
	/* float: left; */
}
.one .one_lf img{
	width: 70px;
	height: 70px;
	float: left;
	/* margin-top: 50px; */

	margin: 50px 100px;
}
.one .one_lf .a1{
	font-size: 20px;
	padding-top: 80px;
	text-align: left;
	color: white;
	/* float: left; */
}
.one .one_lf .a2{
	font-size: 10px;
	color: white;
	float: left;
	/* text-align: right; */
	padding-left: 40px;
}
.one .one_lf .a3{
	color: #666;
	/* text-align: right; */
}
.one .one_rg{
	width: 680px;
	/* width: 100%; */
	height: 110px;
	float: left;
	/* background-color: skyblue; */
}
.one .one_rg .login{
	color: white;
	font-size: 18px;
	padding-left: 560px;
	padding-top: 50px;
}
.one .one_rg .login:hover{
	cursor: pointer;/*鼠标变成小手*/
	color: skyblue;
}
.one .one_rg .tab{
	list-style: none;
	position: relative;
}
.one .one_rg .tab img{
	width: 18px;
	height: 18px;
	padding-left: 10px;
}
.one .one_rg .tab li{
	float: left;
	color: white;
	font-size: 20px;
	margin-top: 23px;
	margin-left: 22px;
	/* cursor: pointer; */
}
.one .one_rg .tab li:hover{
	color: skyblue;
}
.li_a{
							/* 不用脱离标准文档流 */
	/* position: absolute;
	top: 140px; */
	/* right: 400px; */
	display: none;
	width: 100%;
	height: 100%;
	background-color: white;
	/* 弹出时背景为白色 */
}
.li_a h1{
	color: black;
	padding: 50px 20px;
	font-family: "宋体";
	font-size: 50px;
}
.li_a .buy_1 ul{
	list-style: none;
	width: 100%;

}
.li_a .buy_1 ul li{
	width: 280px;
	height: 180px;
	float: left;
	padding: 0 10px;
	/* margin: 0 20px; */
}
.li_a .buy_1 ul li img{
	cursor: pointer;
	width: 280px;
	height: 180px;
}
.li_a .buy_1 h4{
	cursor: pointer;
}
.li_a .buy_1 h4:hover{
	/* cursor: pointer; */
	color: skyblue
}
/* 第二个————轮播图样式 ++++++++++++++++++++++++++++++++++++++++++++*/

.box{/*这个用来做容器*/
			width: 100%;
			/* width: 1263px;/*用照片的宽度最好*/ 
			height: 526px;
			position: relative;
			/*在这个盒子上用相对定位最好*/
			/* margin: 300px auto; */
			overflow: hidden;
			z-index: 100;

	}
.box .slider{
	width: 100%;
	height: 100%;
}
.box .slider ul{
	list-style: none;
	width: 1000%;
	height: 526px;
	position: absolute;

	/*脱离标准文档流*/
	top: 0;
	left: 0;
}
.box .slider ul li{
	float: left;
}
.box ul img{
	width: 100%;
	vertical-align: top;
	/*去除缝隙*/
}
.box .scorr_nav{/*是小圆点的盒子，对盒子做的操作*/
	list-style: none;
	position: absolute;
	bottom: 10px;
	right: 20px;
}
.box .scorr_nav li{/*是盒子里面的内容，对元素进行操作*/
	width: 20px;
	height: 20px;
	float: left;
	color: white;
	background-color: #000;
	font-size: 12px;
	cursor: pointer;
	border-radius: 50%;/*变圆*/
	text-align: center;
	line-height: 20px;/*上下垂直*/
	margin-right: 5px;
}
.box .scorr_nav li.a{/*对单独的样式进行设置*/
	background-color: #356acb;
}
.box .arr{/*设置左右箭头的共有属性*/
	width: 40px;
	height: 50px;
	font-size: 35px;
	font-family: "黑体";
	font-weight: bold;
	color: white;
	background-color:rgba(0,0,0,0.2);/*让背景透明*/
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	position: absolute;/*绝对定位*/
	top : 150px;
	display: none;
}
.box .arr_prev{
	left: 5px;
}
.box .arr_next{
	right: 5px;
}
.three{
	width: 100%;
	height: 700px;
	/* background-color: #000; */
}
.three .chexing{
	width: 100%;
	height: 170px;
	/* color: #ccc; */
	/* background-color: orange; */
	line-height: 170px;
}
.three .chexing p{
	float: left;
	color: #ccc;
	margin-top: 20px;
}
.three .chexing .llll{
	font-size: 45px;
	font-family: "宋体";
	color: black;
}
				/* 定义图片盒子的宽高 */
.three .carstyle{
	width: 1200px;
	height: 500px;
	margin: 0 auto;
	/* background-color: skyblue; */
}
.three .carstyle ul{
	list-style: none;
}
.three .carstyle ul li{
	float: left;
}
.three .carstyle ul img{
	vertical-align: top;
	cursor: pointer;
	width: 300px;
	height: 500px;
}
.three .carstyle ul li:hover{
	/* display: none; */
	/* color: #000; */
	/* background: rgba(0,0,0,0.11);/*0.38*/ */
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.four{
	width: 100%;
	height: 500px;
	/* background-color: skyblue; */
}
.four .chexing2{
	width: 100%;
	height: 170px;
	/* color: #ccc; */
	/* background-color: orange; */
	line-height: 170px;
}
.four .chexing2 p{
	float: left;
	color: #ccc;
	margin-top: 20px;
}
.four .chexing2 .llll{
	font-size: 45px;
	font-family: "宋体";
	color: black;
}
.four .carstyle2{
	/* 这个大盒子的高是200 */
	width: 100%;
	height: 200px;
	/* background-color: skyblue; */
}
.four .carstyle2 ul{
	list-style: none;
	width: 100%;
	height: 200px;
}
.four .carstyle2 ul li{
	float: left;
	width: 300px;
	height: 200px;
	line-height: 300px;
}
.four .carstyle2 ul img{
	width: 80px;
	height: 80px;
	color: #fff;
	padding: 0 90px;
	cursor: pointer;
}
.four .sizestle{
	width: 100%;
	height: 130px;
	/* background-color: green; */
}
.four .sizestle ul{
	list-style: none;
}
.four .sizestle ul li{
	float: left;
	font-size: 30px;
	padding: 0 80px;
	/* color: #fff; */
	cursor: pointer;
}
/* ???????????????????????????????????????????????????????????????? */


.five{
	width: 100%;
	height: 760px;
	/* background-color: skyblue; */
}
.five .chexing3{
	width: 100%;
	height: 170px;
	line-height: 170px;
	/* background-color: green; */
}
.five .chexing3 p{
	float: left;
	color: #ccc;
	margin-top: 20px;
}
.five .chexing3 .llll{
	font-size: 45px;
	font-family: "宋体";
	color: black;
}
.five .imgstyle{
	/* width: 1000px; */
	width: 100%;
	height: 600px;
	/* background-color: #000; */
}
.five .imgstyle img{
	width: 1130px;
	height: 500px;
	/* margin: 0 20px; */
	margin-left: 50px;
	cursor: pointer;
}
/* ______________________________________________________ */
.six{
	width: 100%;
	height: 1500px;
	/* background-color: green; */
}
.six .siximg .ee{
	width: 720px;
	height: 330px;
	padding-left: 46px;
	cursor: pointer;
}
.six .siximg .ff{
	width: 330px;
	height: 330px;
	padding-left: 15px;
	cursor: pointer;
}
.six .siximg2{
	width: 100%;
	height: 500px;
	/* background-color: skyblue; */
}
.six .siximg2 img{
	width: 1150px;
	height: 400px;
	margin-left: 46px;
	margin-top: 70px;
	cursor: pointer;
}
.six .siximg3{
	width: 100%;
	height: 400px;
	list-style: none;
	padding-top: 30px;
	/* background-color: orange; */
}
.six .siximg3 .ee{
	float: left;
	width: 720px;
	height: 330px;
	padding-left: 46px;
	cursor: pointer;
}
.six .siximg3 .ff{
	float: left;
	width: 330px;
	height: 330px;
	padding-left: 45px;
	cursor: pointer;
}
.six .siximg4{
	width: 100%;
	height: 4S00px;
	background-color: #098;
	list-style: none;
}
.six .siximg4 .ee{
	width: 720px;
	height: 330px;
	padding-left: 46px;
	cursor: pointer;
	float: left;
}
.six .siximg4 .ff{
	float: left;
	width: 330px;
	height: 330px;
	padding-left: 14px;
	cursor: pointer;
}
.seven{
	width: 100%;
	height: 800px;
	margin-top: 250px;
	background-color: #f1f1f1;
}
.seven_A{
	width: 100%;
	height: 600px;
	background-color: #f1f1f1;
	/* background-color: skyblue; */
}
.seven ul{
	list-style: none;
	float: left;
	margin: 0 auto;
}
.seven ul li{
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	padding: 0 60px;
	padding-top: 35px;
}
.seven ul li:hover{
	color: skyblue;
}
.seven .seven_fs{
	font-size: 18px;
}
.seven .seven_fs:hover{

	color: black;
}
.seven .seven_one{
	padding-left: 80px;
}
.seven .seven_B{
	width: 100%;
	height: 200px;
	background-color: #F1F1F1;
	/* background-color: orange; */
}
.seven .seven_B li{
	cursor: pointer;
	list-style: none;
	font-size: 12px;
	float: left;
	/* text-align: center; */
	margin-left:  200px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.seven .seven_B p{
	text-align: center;
	color: #ccc;
}
.seven_C{
	width: 100%;
	height: 150px;
	/* text-align: left; */
	background-color: #F1F1F1;
}
.seven_C p{
	font-size: 18px;
	padding-left: 50px;
}
.seven_C ul{
	list-style: none;
}
.seven_C  li{
	float: left;
}
/* .seven_C  img:hover{
	background-color: skyblue;
} */
.seven_C img{
	cursor: pointer;
	width: 45px;
	height: 45px;
}
.bottom{
	width: 100%;
	height: 100px;
	background-color: #222222;
}
.bottom p{
	text-align: center;
	color: #AAA;
	padding-top: 20px;
	/* line-height: 50px; */
	font-size: 12px;
	cursor: pointer;
}
.bottom p:hover{
	color: skyblue;
}

这个是样式表

function $(id) {
	return document.getElementById(id);
}
window.onload=function(){
	var a=0;//定义导航栏隐藏部分是否显示的状态变量
	$("li_one").onclick=function(){
		
		if(a==0){
			$("li_div").style.display="block";
			a=1;
			// alert(1);
		}
		else{

			$("li_div").style.display="none";
			a=0
		}
	}

	// 轮播图——————————----------------------------
	//鼠标进入轮播图显示左右两侧箭头
			$("scorr").onmousemove=function(){
				var arr=$("scorr").getElementsByTagName("span");
				for (var i = 0; i < arr.length; i++) {
					// alert((arr[i]);
					arr[i].style.display="block";
				}
			}
			//鼠标离开轮播图隐藏左右两侧箭头
			$("scorr").onmouseout=function(){
				var arrs=$("scorr").getElementsByTagName("span");
				for (var i = 0; i < arrs.length; i++) {
					arrs[i].style.display="none";
				}
			}
			         //动态生成小图标的个数
		//1.拿到图片个数,目的是看有几个图片
		var imgcount=$("sl").getElementsByTagName("img").length;
		// var imgcount=$("scorr").children[0].children[0].children.length;
		// alert(imgcount);6
		for (var i = 0; i < imgcount; i++) {
				var b=document.createElement("li");//挨个创建li标签
				b.innerHTML=i+1;//然后设置里面的值
				if(i==0){
					b.setAttribute("class", "a");//为创建的这个标签设置类的class属性
				}
				b.setAttribute("index",i);//是防止小圆点不带数字
					//注册每个选中的事件，用排他思想
					//直接在创建里面注册了
					b.onclick=function(){
						var lis= $("sc_nav").getElementsByTagName("li")
						for (var i = 0; i < lis.length; i++) {
							lis[i].className="";//循环清空类名
						}
						this.className="a";//然后设置当前对象的类名为a
						//然后就用下面这句缓动动画去变换图片，定时器一直在开着
						end=this.getAttribute("index")*-1263;
					}
				$("sc_nav").appendChild(b);//根据id去添加到里面，记得是id不是类，傻逼
			}
			var start =0;
			var end =0;
			setInterval(function(){//认真理解定时器
  				start+=(end-start)/10;
  				$("sl_ul").style.left=end +"px";
  		//这个地方应该是让那个大盒子去移动，所以获取的是那个ul的id！！！
			}, 30)
			//给左右箭头注册点击事件
			$("prev").onclick=function(){
				if(end>-6315)
				end+=-1263;
				else{
					end=0;
				}
				seta();
			}
			$("next").onclick=function(){
				if(end >-6315){
					end-=1263;
				}
				else{
					end=0;//如果是最后一张图，回到第一张
				}
				seta();

			}
			function seta(){
				var index=Math.abs(end/1263);//M记得大写，因为是一个类！！
				lis=$("sc_nav").getElementsByTagName("li");
				for (var i = 0; i < lis.length; i++) {
					lis[i].className="";
				}
				lis[index].className="a";
			}
			//用于循环轮播
			var set=setInterval(lunbo, 1000);
			function lunbo(){

				var imgs=$("sl_ul").getElementsByTagName("img");
				for (var i = 0; i < imgs.length; i++) {
					// alert(i);
					imgs[i].style.left=-1263*(i+1)+"px";
					console.log(i);
				}
			}
	{
		$("book").onmouseover=function(){
			$("book").src="img/book2.png";
		}
		$("book").onmouseout=function(){
			$("book").src="img/book.png";
		}
		$("car_3").onmouseover=function(){
			$("car_3").src="img/car33.png";
		}
		$("car_3").onmouseout=function(){
			$("car_3").src="img/car3.png";
		}
		$("car_1").onmouseover=function(){
			$("car_1").src="img/car11.png";
		}
		$("car_1").onmouseout=function(){
			$("car_1").src="img/car1.png";
		}
		$("car_2").onmouseover=function(){
			$("car_2").src="img/car22.png";
		}
		$("car_2").onmouseout=function(){
			$("car_2").src="img/car2.png";
		}
		$("family_1").onmouseover=function(){
			$("family_1").src="img/family1.png";
		}
		$("family_1").onmouseout=function(){
			$("family_1").src="img/family.png";
		}
		$("wumen_").onmouseover=function(){
			$("wumen_").src="img/wumen2.png";
		}
		$("wumen_").onmouseout=function(){
			$("wumen_").src="img/wumen.png";
		}
		$("ipone_").onmouseover=function(){
			$("ipone_").src="img/ihpone2.png";
		}
		$("ipone_").onmouseout=function(){
			$("ipone_").src="img/ihpone.png";
		}
		$("bigred").onmouseover=function(){
			$("bigred").src="img/buy11.jpg";
		}
		$("bigred").onmouseout=function(){
			$("bigred").src="img/buy1.jpg";
		}
		$("a2").onmouseover=function(){
			$("a2").src="img/big22.png";
		}
		$("a2").onmouseout=function(){
			$("a2").src="img/big2.png";
		}
		$("a3").onmouseover=function(){
			$("a3").src="img/big33.png";
		}
		$("a3").onmouseout=function(){
			$("a3").src="img/big3.png";
		}
		$("a4").onmouseover=function(){
			$("a4").src="img/big44.png";
		}
		$("a4").onmouseout=function(){
			$("a4").src="img/big4.png";
		}
		$("a1").onmouseover=function(){
			$("a1").src="img/big11.png";
		}
		$("a1").onmouseout=function(){
			$("a1").src="img/big1.png";
		}
	}
	$("fix_A").onclick=function(){
		alert(1);
		$("img_li").style.display="block";//?????????????????????????????????
	}
}