HTML第三次作业——Tab切换和轮播图

浅浅的花香味﹌ 2023-07-20 10:50 16阅读 0赞

第一题：完全模仿京东首页的每日特价专栏制作一个Tab切换效果，除了图片大小和图片具体内容不一样外，其它部分要求高仿，即内容部分也要求高仿，即也是由图片和文字的组合构成，最左边也是一张图片。
    效果图：
    
    代码如下：

<!DOCTYPE html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>京东tab切换</title>
    		<style>
    			* {
    				padding: 0px;
    				margin: 0px;
    				list-style: none;
    			}
    			
    			body {
    				background: gainsboro;
    			}
    			
    			a {
    				text-decoration: none;
    			}
    			
    			/*最外面大盒子*/
    			.a {
    				width: 600px;
    				height: 360px;
    				margin: 5px;
    				auto;
    				background: white;
    				position: relative;
    			}
    			
    			.header,
    			.bodyer {
    				position: absolute;
    			}
    			
    			.header {
    				width: 550px;
    				height: 80px;
    				background: white;
    				margin-top: 0px;
    				margin-left: 20px;
    			}
    			
    			.bodyer {
    				width: 550px;
    				height: 270px;
    				background: white;
    				margin-top: 80px;
    				margin-left: 20px;
    			}
    			
    			/*每日特价和后面的小logo*/
    			.h-mei {
    				font-size: 20px;
    				display: block;
    				background: white;
    				width: 116px;
    				height: 35px;
    				line-height: 35px;
    				margin-left: 15px;
    				margin-top: 20px;
    				text-decoration: none;
    			}
    			
    			h3 {
    				color: black;
    			}
    			
    			/*每日特价后面的logo*/
    			.logo0 {
    				background-image: url(images/001.png);
    				display: block;
    				background-position: -16px 0;
    				position: relative;
    				width: 16px;
    				height: 16px;
    				margin-left: 100px;
    				margin-top: -25px;
    			}
    			.h-mei:hover .logo0{background-position: 0px 0px;}
    			
    			
    			/*ul四个tab*/
    			.b-tab {
    				width: 230px;
    				height: 100px;
    				margin-left: 350px;
    				margin-top: -62px;
    			}
    			.b-tab:hover{cursor: pointer;}
    			
    			ul li {
    				float: left;
    				color: grey;
    				height: 40px;
    				line-height: 40px;
    				margin-right: 1px;
    				padding: 0px 10px;
    			}
    			
    			/*初始位置 精选tab*/
    			.on {
    				color: red;
    				font-weight: bold;
    				border-bottom: 2px solid red;
    			}
    			
    			/*左边大商品盒子*/
    			.p1 {
    				width: 180px;
    				height: 270px;
    				background: ghostwhite;
    				margin-top: -38px;
    			}
    			
    			/*右边四个小商品盒子*/
    			.p2,
    			.p3,
    			.p4,
    			.p5 {
    				width: 180px;
    				height: 130px;
    				background: white;
    			}
    			
    			.p2 {
    				margin-left: 185px;
    				margin-top: -270px;
    			}
    			
    			.p3 {
    				margin-left: 370px;
    				margin-top: -130px;
    			}
    			
    			.p4 {
    				margin-left: 185px;
    				margin-top: 10px;
    			}
    			
    			.p5 {
    				margin-left: 370px;
    				margin-top: -130px;
    			}
    			
    			/*大商品盒子里的200天最低价logo*/
    			.logoa1 {
    				display: inline-block;
    				font-size: 13px;
    				color: white;
    				font-weight: 700;
    				width: 90px;
    				height: 24px;
    				background: orange;
    				text-align: center;
    				line-height: 24px;
    				position: absolute;
    				left: 0;
    			}
    			
    			/*小商品盒子里的  天最低价阴影logo*/
    			.logoa2 {
    				width: 90px;
    				height: 20px;
    				background: rgba(0, 0, 0, 0.6);
    				font-size: 14px;
    				color: white;
    				margin-left: 10px;
    				margin-top: -24px;
    				position: relative;
    				text-align: center;
    			}
    			
    			/*大商品图片*/
    			.pp1 {
    				width: 144px;
    				height: 144px;
    				margin-top: 35px;
    				margin-left: 18px;
    			}
    			
    			/*小商品图片*/
    			.pp2 {
    				width: 90px;
    				height: 100px;
    				margin-left: 10px;
    			}
    			
    			/*大商品商品名*/
    			.pname {
    				display: inline-block;
    				width: 180px;
    				height: 19px;
    				font-size: 14px;
    				text-align: center;
    				line-height: 19px;
    			}
    			
    			.pname:hover {
    				/*cursor: pointer;*/
    				color: red;
    			}
    			
    			/*小商品商品名*/
    			.pname1 {
    				width: 60px;
    				height: 20px;
    				display: block;
    				font-size: 14px;
    				margin-left: 110px;
    				margin-top: -90px;
    			}
    			
    			/*大商品价格盒子 有原价现价*/
    			.price {
    				width: 180px;
    				height: 20px;
    				margin: 9px auto;
    				text-align: center;
    			}
    			
    			/*现价数字*/
    			.price1 {
    				font-size: 18px;
    				color: red;
    				display: inline;
    			}
    			
    			/*现价符号￥*/
    			.price11 {
    				font-size: 12px;
    			}
    			
    			/*原价*/
    			.price10 {
    				font-size: 12px;
    				color: gray;
    				text-decoration: line-through;
    			}
    			
    			/*已售件*/
    			.Number {
    				color: gray;
    				display: block;
    				font-size: 12px;
    				text-align: center;
    			}
    			.number {
    				color: red;
    			}
    			
    			/*小商品价格盒子*/
    			.price01 {
    				margin-left: 110px;
    				margin-top: 20px;
    			}
    			
    			/*小商品已售多少件数*/
    			.xiaoliang {
    				margin-left: 100px;
    				margin-top: 8px;
    			}
    			
    			.tabs{
    				border-bottom: 2px white solid;
    			}
    			
    			
    		</style>
    	</head>
    
    	<body>
    		<div class="a">
    			
    			<div class="header">
    				<a class="h-mei" href="#">
    					<h3>每日特价</h3>
    					<i class="logo0">
    						
    					</i>
    				</a>
    			</div>
    			
    
                
    			<div class="bodyer">
    				<div>
    					
    					<ul class="b-tab">
    						<li class="on tabs" id="tab">精选</li>
    						<li class="tabs" id="tab">服饰</li>
    						<li class="tabs" id="tab">家电</li>
    						<li class="tabs" id="tab">美妆</li>
    					</ul>
    					
    					<div class="pictures">
    						
    						<div class="content"   style="display: block;"  >
    							<div class="p1">
    								<img class="pp1" src="images/01.jpg" />
    								<div class="logoa1">388天最低价</div>
    
    								<span class="pname">高端蓝牙音箱</span>
    								<div class="price">
    									<span class="price1"><span class="price11">￥</span>299</span>
    									<span class="price10"><span class="price110">￥</span>399</span>
    								</div>
    								<span class="Number">已抢<span class="number">10</span>件</span>
    
    							</div>
    
    							<div class="p2">
    								<img class="pp2" src="images/02.jpg" />
    								<div class="logoa2">200天最低价</div>
    
    								<span class="pname1">华为平板</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>19999</span>
    									<span class="price10"><span class="price110">￥</span>29999</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">已抢<span class="number">10</span>件</span>
    								</div>
    							</div>
    
    							<div class="p3">
    								<img class="pp2" src="images/03.jpg" />
    								<div class="logoa2">100天最低价</div>
    
    								<span class="pname1">农家红富士苹果</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>9.9</span>
    									<span class="price10"><span class="price110">￥</span>29.9</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">已抢<span class="number">199</span>件</span>
    								</div>
    							</div>
    
    							<div class="p4">
    								<img class="pp2" src="images/04.jpg" />
    								<div class="logoa2">111天最低价</div>
    
    								<span class="pname1">纺织床上用品</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>199</span>
    									<span class="price10"><span class="price110">￥</span>299</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">已抢<span class="number">250</span>件</span>
    								</div>
    							</div>
    
    							<div class="p5">
    								<img class="pp2" src="images/05.jpg" />
    								<div class="logoa2">121天最低价</div>
    
    								<span class="pname1">加绒加厚冲锋衣</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>98.99</span>
    									<span class="price10"><span class="price110">￥</span>168</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">已抢<span class="number">557</span>件</span>
    								</div>
    							</div>
    						</div>
    						
    
    						
    						<div class="content"     style="display: none;">
    							<div class="p1">
    								<img class="pp1" src="images/21.jpg" />
    								<div class="logoa1">1月最低价</div>
    
    								<span class="pname">春季新款连衣裙</span>
    								<div class="price">
    									<span class="price1"><span class="price11">￥</span>150</span>
    									<span class="price10"><span class="price110">￥</span>220</span>
    								</div>
    								<span class="Number">热卖中</span>
    
    							</div>
    
    							<div class="p2">
    								<img class="pp2" src="images/22.jpg" />
    								<div class="logoa2">121天最低价</div>
    
    								<span class="pname1">亚麻男士短袖</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>89.9</span>
    									<span class="price10"><span class="price110">￥</span>129.0</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p3">
    								<img class="pp2" src="images/23.jpg" />
    								<div class="logoa2">145天最低价</div>
    
    								<span class="pname1">阿迪达斯</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>200.1</span>
    									<span class="price10"><span class="price110">￥</span>399.9</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p4">
    								<img class="pp2" src="images/24.jpg" />
    								<div class="logoa2">一个月最低价</div>
    
    								<span class="pname1">外套女风衣</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>238</span>
    									<span class="price10"><span class="price110">￥</span>350.0</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p5">
    								<img class="pp2" src="images/25.jpg" />
    								<div class="logoa2">122天最低价</div>
    
    								<span class="pname1">经典棒球帽</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>21.9</span>
    									<span class="price10"><span class="price110">￥</span>30.0</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    						</div>
    						
    
                            
    						<div class="content"    style="display: none;">
    							<div class="p1">
    								<img class="pp1" src="images/31.jpg" />
    								<div class="logoa1">半年最低价</div>
    
    								<span class="pname">小米电视</span>
    								<div class="price">
    									<span class="price1"><span class="price11">￥</span>2555</span>
    									<span class="price10"><span class="price110">￥</span>2700</span>
    								</div>
    								<span class="Number">热卖中</span>
    
    							</div>
    
    							<div class="p2">
    								<img class="pp2" src="images/32.jpg" />
    								<div class="logoa2">222天最低价</div>
    
    								<span class="pname1">美的冰箱</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>8999.9</span>
    									<span class="price10"><span class="price110">￥</span>12999.0</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p3">
    								<img class="pp2" src="images/33.jpg" />
    								<div class="logoa2">145天最低价</div>
    
    								<span class="pname1">变频微波炉</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>449.0</span>
    									<span class="price10"><span class="price110">￥</span>559.9</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p4">
    								<img class="pp2" src="images/34.jpg" />
    								<div class="logoa2">一个月最低价</div>
    
    								<span class="pname1">智能电饭煲</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>238</span>
    									<span class="price10"><span class="price110">￥</span>350.0</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p5">
    								<img class="pp2" src="images/35.jpg" />
    								<div class="logoa2">150天最低价</div>
    
    								<span class="pname1">全自动洗衣机</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>1799</span>
    									<span class="price10"><span class="price110">￥</span>2000</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    						</div>
    						
    
    
    						
    						<div class="content"    style="display: none;">
    							<div class="p1">
    								<img class="pp1" src="images/41.jpg" />
    								<div class="logoa1">1年最低价</div>
    
    								<span class="pname">迪奥烈焰蓝金唇膏</span>
    								<div class="price">
    									<span class="price1"><span class="price11">￥</span>255</span>
    									<span class="price10"><span class="price110">￥</span>270</span>
    								</div>
    								<span class="Number">热卖中</span>
    
    							</div>
    
    							<div class="p2">
    								<img class="pp2" src="images/42.jpg" />
    								<div class="logoa2">99天最低价</div>
    
    								<span class="pname1">电动洁面仪</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>89.9</span>
    									<span class="price10"><span class="price110">￥</span>129.0</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p3">
    								<img class="pp2" src="images/43.jpg" />
    								<div class="logoa2">145天最低价</div>
    
    								<span class="pname1">novo眼影</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>20.1</span>
    									<span class="price10"><span class="price110">￥</span>39.9</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p4">
    								<img class="pp2" src="images/44.jpg" />
    								<div class="logoa2">一个月最低价</div>
    
    								<span class="pname1">复活草水润面膜</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>238</span>
    									<span class="price10"><span class="price110">￥</span>350.0</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    
    							<div class="p5">
    								<img class="pp2" src="images/45.jpg" />
    								<div class="logoa2">122天最低价</div>
    
    								<span class="pname1">JBH修复护发精油</span>
    								<div class="price01">
    									<span class="price1"><span class="price11">￥</span>215</span>
    									<span class="price10"><span class="price110">￥</span>300</span>
    								</div>
    								<div class="xiaoliang">
    									<span class="Number">热卖中</span>
    								</div>
    							</div>
    						</div>
    						
    
    						
    						
    					</div>
    				</div>
    			</div>
    			
    		</div>
    
    <script>
    	
    	
    var tabs = document.getElementsByClassName("content") //获取装切换内容的盒子
    var lis = document.getElementsByTagName("li") //获取tab切换的li标签，（切记不要再别处再写li标签，否则tab切换会失效）
    	//tab切换
    	window.onload = function() {
    		for(var i = 0; i < lis.length; i++) {
    			lis[i].index = i;
    			lis[i].onmousemove = function() {
    				
    				for(var j = 0; j < lis.length; j++) {
    					lis[j].className = "tabs";
    				}
    				this.className = "on";
    				for(var k = 0; k < tabs.length; k++) {
    					tabs[k].style.display = "none";
    				}
    				tabs[this.index].style.display = "block";
    			}
    		}
    	}
    </script>
    </body>
    
    </html>

第二题：模仿焦作市人民政府官网（http://www.jiaozuo.gov.cn/）首页走进焦作、要闻动态、政务专栏的垂直型Tab切换效果，即鼠标滑动到走进焦作、要闻动态、政务专栏等不同标签上时标签呈类似微信对话框的外形，同时显出该标签对应部分的内容【此题中内容部分的样式可以不完全高仿】。
    
    效果图：
    
    
    代码如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>焦作官网</title>
    		<style>
    			* {
    				padding: 0px;margin: 0px;list-style: none;text-decoration: none;
    			}
    
    			.box1{height: 390px;
    				  width: 100%;
    				  margin: 80px auto;}
    
    			ul{width: 200px;height: 385px;margin-left: 30px;margin-top: 5px;}
    			ul li{width: 200px;height: 60px;margin-bottom: 5px;background-color: #cdcdcd;color: darkblue;
    					font-size: 30px;line-height: 60px;text-align: center;}
    
    			li:hover{background-color: #4d4dff;text-align: center;}
    			li:hover a{color: white;}
    			li:hover:after{
    			content:"";
    			display:inline-block;
    			width: 0px;
    			height: 0px;
    			border:15px solid transparent;
    			border-left:15px solid #4d4dff;
    			position:relative;
    			left:53px;
    			bottom:0px;
    		}
    			#box2{height: 390px;border: 1px solid black;margin-top: -390px;margin-left: 253px;}
    			#box2 div{display: none;}
    			#box2 .selected{display: block;}
    			h3{margin-top: 20px;margin-left: 10px;font-size: 25px;color: #4d4dff;}
    			p{margin-left: 15px;margin-top: 15px;margin-right:15px;text-indent:0em;border-top: 1px solid black;
    			  line-height: 2;letter-spacing: 1.2;}
    		</style>
    	</head>
    
    	<body>
    		<div class="box1">
    				<ul id="tab">
    					<li class="on">
    						<a href="#" target="_blank">走进焦作</a><span></span></li>
    					<li>
    						<a href="#">要闻动态</a><span></span></li>
    					<li>
    						<a href="#" target="_blank">政务公开</a><span></span></li>
    					<li>
    						<a href="#" target="_blank">政务服务</a><span></span></li>
    					<li class="">
    						<a href="#" target="_blank">政民互动</a><span></span></li>
    					<li class="">
    						<a href="#" target="_blank">专题专栏</a><span></span></li>
    				</ul>
    			<div id="box2">
    				<div class="selected">
    					<h3>市情简介</h3>
    					<p>焦作位于河南省西北部，北依太行，南临黄河，辖6县（市）4区和1个城乡一体化示范区，总面积4071平方公里，总人口377.5万。<br /><br />
        山水焦作，太极圣地。焦作古称山阳、怀州，是华夏民族早期活动的中心区域之一，是司马懿、韩愈、李商隐、许衡、朱载堉等历史文化名人的故里，是“竹林七贤”的聚集地、太极拳的发源地、“四大怀药”的原产地。太行山在焦作连绵百余公里，有云台山、神农山、青天河3家5A级景区，是中国优秀旅游城市、国家智慧健康养老示范基地，正在依托独有的山水资源、太极文化、怀药原产地优势，全力打造“世界太极城、中原养生地”。
    </p>
    				</div>
    				<div>
    					<h3>部门动态</h3>
    					<p>
    市物资局法律服务助力企业复工复产2020-03-18 <br />云台山景区推出多项优惠政策致敬抗疫英雄2020-03-16 <br />市文化广电和旅游局掀起郑焦黄河生态文化旅游廊道...2020-03-16<br /> 市医疗保障局部署年度六项重点工作2020-03-13<br />
    中站区领导召开重点区域征迁工作推进会2020-03-19 <br />中站区领导督导检查老旧小区改造工作2020-03-19 中站区召开第32次政府常务会议2020-03-19 <br />中站区龙翔街道办事处疫情防控、森林防火两手抓两...2020-03-19
    </p>
    				</div>
    				<div>
    					<h3>政府文库</h3>
    					<p>焦作市人民政府 关于印发《促进乡村产业振兴的指导意见》的 通 ...2020-03-18 <br />焦作市人民政府 印发《关于加强“菜篮子”工程建设的 指导意见》...2020-03-18<br /> 焦作市人民政府关于做好第七次全国人口普查工作的通知2020-02-27 <br />焦作市人民政府 关于在市场监管领域全面推行部门联合 “双随机、...2020-02-27
    </p>
    				</div>
    				<div>
    					<h3>个人办事</h3>
    					<p>3月17日0-24时河南省无新增新冠肺...03-18<br />
    在高新技术产业发展领域先行先试当先锋 在建设生态宜...03-18<br />
    树牢机遇意识 强化战略思维 以高水平规划引领城市高...03-18<br />
    全力做好非洲猪瘟疫情防控工作03-18
    </p>
    				</div>
    				<div>
    					<h3>在线访谈</h3>
    					<p>焦作市政府新闻办举行疫情防控工作第二场新闻发布... <br />“河南省新型冠状病毒感染的肺炎疫情防控工作” ... <br />严防新型冠状病毒感染的肺炎输入病例在我市发生 ...<br /> 最全！国家卫健委等就疫情防控工作答记者问实录 齐心协力 <br />严防新型冠状病毒感染的肺炎输入病例在... <br />把民生放在心间 把发展扛在肩上——访马村区委书... <br />聚焦难点堵点痛点 实打实办好民生实事——访中站...
    </p>
    				</div>
    				<div>
    					<h3>专题专栏</h3>
    					<p>政府信息公开专题 <br />智库建设 焦作史志<br /> 2017-2018年度大气污染综合治理强化督查 <br />2018-2019年度大气污染综合治理强化督查 应急管理专题<br /> 预备役部队专题 <br /> 高擎利剑保安宁扫黑除恶进行时
    </p>
    				</div>
    			</div>
    		</div>
    		
    		<script>
      		var tabs=document.getElementById("tab").getElementsByTagName("li");
      		var divs=document.getElementById("box2").getElementsByTagName("div");
      		
      		for(var i=0;i<tabs.length;i++){
      			tabs[i].onmouseover=function(){
      				change(this)
      			}
      		}
    
      		function change(obj){
      			for(var i=0;i<tabs.length;i++){
      				if(tabs[i]==obj){
      					tabs[i].className="on";
      					divs[i].className="selected";
      				}
      				else{
      					tabs[i].className="";
      					divs[i].className="";
      				}
    
      			}
      				
      		}
    	</script>
    	</body>
    
    </html>

第三题：模仿当当网首页正上方的轮播图效果，除了要完全实现我们课堂讲过案例的轮播效果外还要求在轮播图片的左右两端各有一个切换箭头按钮【鼠标放到图片上时箭头显示，离开图片箭头隐藏】，单击左右箭头分别切换到上一张和下一张图片。
    
    效果图
    
    
    代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>淘宝</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
                border: 0;
            }
    
            .all {
                width: 500px;
                height: 200px;
                padding: 7px;
                border: 1px solid #ccc;
                margin: 100px auto;
                position: relative;
            }
    
            .screen {
                width: 500px;
                height: 200px;
                position: relative;
                overflow: hidden;
            }
    
            .screen li {
                width: 500px;
                height: 200px;
                overflow: hidden;
                float: left;
            }
    
            .screen ul {
                position: absolute;
                left: 0;
                top: 0px;
                width: 3000px;
            }
    
            .all ol {
                position: absolute;
                right: 10px;
                bottom: 10px;
                line-height: 20px;
                text-align: center;
            }
    
            .all ol li {
                float: left;
                width: 20px;
                height: 20px;
                background: #fff;
                border: 1px solid #ccc;
                border-radius: 50%;
                margin-left: 10px;
                cursor: pointer;
            }
    
            .all ol li.current {
                background: #DB192A;
            }
    
            #arr {
                display: none;
            }
    
            #arr span {
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #000;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #fff;
                opacity: 0.3;
                border: 1px solid #fff;
            }
    
            #arr #right {
                right: 5px;
                left: auto;
            }
        </style>
    </head>
    <body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="img/01.jpg" width="500" height="200"/></li>
                <li><img src="img/02.jpg" width="500" height="200"/></li>
                <li><img src="img/03.jpg" width="500" height="200"/></li>
                <li><img src="img/04.jpg" width="500" height="200"/></li>
                <li><img src="img/05.jpg" width="500" height="200"/></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr"><span id="left"><</span><span id="right">></span></div>
    </div>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }
    
        //获取最外层div
        let box = my$("box");
        //获取 相框 screen
        let screen = box.children[0];
        let screenWidth = screen.offsetWidth;
        //获取ul
        let ulObj = screen.children[0];
        //获取ul中所有的div
        let liList = ulObj.children;
        //左右点击箭头的显示
        let arr = my$("arr");
        //设置ol
        let olObj = document.getElementsByTagName("ol")[0];
        let pos = 0;
        for (let i = 0; i < liList.length; i++) {
            let liObj = document.createElement("li");
            olObj.appendChild(liObj);
            liObj.innerText = i + (1);
            //在每个ol中的li标签上添加一个自定义属性,存储索引值
            liObj.setAttribute("index", i);
            liObj.onmouseover = function () {
                for (let j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                //设置当前鼠标进来的li的背景颜色
                liObj.className = "current";
                pos = liObj.getAttribute("index");
                animate(ulObj, -pos * screenWidth);
            }
        }
    
        olObj.children[0].className = 'current';
    
        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
            clearInterval(element.timeId);
            element.timeId = setInterval(function () {
                //获取当前元素的位置
                let current = element.offsetLeft;
                //设置每次移动的距离
                let step = 10;
                step = current < target ? step : -step;
                //设置当前移动到的位置
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.style.left = target + "px";
                }
            }, 10)
        }
    
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
        my$("right").onclick = clickHandle;
    
        function clickHandle() {
    
            if (pos >= ulObj.children.length - 1) {
                pos = 0;
                ulObj.style.left = -pos * screenWidth + "px";
    
            }
            pos++;
            animate(ulObj, -pos * screenWidth);
            if (pos == ulObj.children.length - 1) {
                olObj.children[pos - 1].removeAttribute("class");
                olObj.children[0].className = "current";
            } else {
                for (let j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                olObj.children[pos].className = "current";
            }
        }
    
        window.timeId = setInterval(clickHandle, 1000);
    
        my$("left").onclick = function () {
            if (pos <= 0) {
                pos = ulObj.children.length - 1;
                ulObj.style.left = -pos * screenWidth + "px";
            }
            pos--;
            animate(ulObj, -pos * screenWidth);
            for (let j = 0; j < olObj.children.length; j++) {
                olObj.children[j].removeAttribute("class");
            }
            olObj.children[pos].className = "current";
        };
    
    
        //鼠标进入事件
        box.onmouseover = function () {
            arr.style.display = "block"
            clearInterval(timeId);
        };
        //鼠标离开事件
    
        box.onmouseout = function () {
            arr.style.display = "none"
            window.timeId = setInterval(clickHandle, 1000);
        }
    </script>
    
    </body>
    </html>

第四题：通过查阅资料，谈谈你对Vue、React这两款当前最流行的前端框架的了解，同时谈谈你对前端开发前景的认识。

Vue 是一套用于构建用户界面的渐进式[JavaScript][]框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

[React][].js基于[Virtual][][DOM][]重新定义了用户界面的开发方式，彻底革新了大家对前端框架的认识，将[PHP][]风格的开发方式迁移到客户端应用开发。其优势在于可以与各种类库、框架搭配使用。

现在互联网的大环境的发展如日中天，网络已经深入到每个人生活的的各个方面，各种项目层出不穷，以及各种定制化的ui风格，PC端、手机端、mobile端，各种兼容问题真的很浪费时间，大家在不断的摸索中发现，把html+css+js这部分工作独立出来一个新的岗位来处理，这样后端的工程师们可以专注于数据接口的开发以及逻辑的处理，然后视觉设计师们也可以不用熬夜码代码了。当一个行业发展到一定程度形成产业的时候，它里面的环节一定会细节化的，让专业的人做更专业的事情。所以，我认为前端必然在今后十年有很大的发展，十年内最有发展前景的行业，前端是其中之一。

[JavaScript]: https://baike.baidu.com/item/JavaScript/321142
[React]: https://baike.baidu.com/item/React
[Virtual]: https://baike.baidu.com/item/Virtual
[DOM]: https://baike.baidu.com/item/DOM/50288
[PHP]: https://baike.baidu.com/item/PHP/9337