菜单 搜索
首页 前端知识 基于Echarts HTML5可视化数据大屏展示-大学迎新实时大数据可视化

基于Echarts HTML5可视化数据大屏展示-大学迎新实时大数据可视化

2024-09-12 23:09:05 前端知识 前端哥 883 702 我要收藏

博主主页：猫头鹰源码
博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作
​主要内容：毕业设计(Javaweb项目|小程序|Python|HTML|数据可视化|SSM|SpringBoot|Vue|Jsp|PHP等)、简历模板、学习资料、面试题库、技术咨询、文档编写和辅导、论文降重、长期答辩答疑辅导、腾讯会议一对一专业讲解辅导答辩
☑️ 文末联系获取

👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟

2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅

2024最新精品毕业设计项目，已整理自取
感兴趣可以先收藏起来，以防走丢，有任何选题、文档编写、代码问题也可以咨询我们

动图演示：文末白嫖源码

代码结构

主要代码实现

index.html布局

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta content="always" name="referrer" />
	<title>迎新实时数据分析</title>
	<link rel="stylesheet" type="text/css" href="./static/css/home.css" />
	<link rel="stylesheet" type="text/css" href="./static/css/swiper.min.css" />
	<style>
		body {
			width: 16rem;
			height: 9rem;
			background: url(./static/images/bg1.jpg) center 0 no-repeat #0f102b;
			background-size: contain;
		}
	</style>
	<script type="text/javascript" src="./static/js/jquery.min.js"></script>
	<script type="text/javascript" src="./static/js/swiper.min.js"></script>
	<script type="text/javascript" src="./static/js/echarts.min.js"></script>
	<script type="text/javascript" src="./static/js/china.js"></script>
	<!--滚动条美化-->
	<script type="text/javascript" src="./static/js/jquery.nicescroll.js"></script>
	<!--滚动插件-->
	<script type="text/javascript" src="./static/js/jquery.vticker-min.js"></script>
	<script type="text/javascript" src="./static/js/bigdata.js"></script>
	<script type="text/javascript">
 
		var paramData = {"studentType":''};
		var studentType = "";
 
		$(function(){
			regData();
			// originRegisterRate();
			studentRegisterTime();
			map();
			stuNation();
			affairNum();
			studentAge();
			studentBedData();
			// setInterval(getServerDate,1000);
			setInterval(regData,1000*10);
			setInterval(studentRegisterTime,1000*10);
			setInterval(map,1000*10);
			setInterval(stuNation,1000*10);
			setInterval(affairNum,1000*10);
			setInterval(studentAge,1000*10);
			//setInterval(selectCollege,1000*30);
			setInterval(studentBedData,1000*10);
		})
	</script>
	<script type="text/javascript">
		/*
          useREM.resize() 立即刷新
          useREM.set({max: 400000}) 设置参数，并立即刷新
                 max - 最大宽度
                 min - 最小宽度
                 num - 块数
                 delay - 事件触发resize的时间间隔*/
		(function() {
			var timer, style = document.head.appendChild(document.createElement("style"));
 
			var useREM = window.useREM = Object.create({
				resize: function() {
					var config = this.config;
					this.size = Math.max(config.min, Math.min(config.max, document.documentElement.clientWidth)) / config.num;
					style.innerHTML = "html{font-size: " + this.size + "px !important;}"
					return this;
				},
				set: function(newConfig) {
					if (newConfig) {
						for (var a in newConfig) {
							if (this.config.hasOwnProperty(a)) {
								this.config[a] = newConfig[a];
							}
						}
					}
					this.resize();
					return this;
				}
			}, {
				size: {
					value: 20,
					writable: true,
					configurable: false,
					enumerable: true
				},
				config: {
					value: {
						max: 400000,
						min: 300,
						num: 16,
						delay: 50
					},
					writable: false,
					configurable: false,
					enumerable: true
				}
			});
			addEventListener("resize", function() {
				clearTimeout(timer);
				timer = setTimeout(this.resize.bind(this), this.config.delay);
			}.bind(useREM));
 
			useREM.set();
 
			window.onload=window.onresize=function(){
				useREM.resize();
			}
 
		})();
		$(document).ready(function(){
			/*趋势图轮播*/
			var myswiper = new Swiper('.swiper-container', {
				effect: 'coverflow',
				grabCursor: true,
				slidesPerView: '4',
				autoplay: true,
				initialSlide:0,
				loop:true,
				autoplay:{
					disableOnInteraction: false,//默认true
					delay:2000
				},
				coverflowEffect: {
					rotate: -25,
					stretch: 0,
					// depth: 120,
					modifier: 1,
					slideShadows : false
				},
				pagination: {
					el: '.swiper-pagination',
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				}
			});
			/* $(".J_page1").hide();
            $(".J_page2").show(); */
			setInterval(function(){
				if($(".J_page1").is(':visible')){
					$(".J_page1").hide();
					$(".J_page2").fadeIn('slow', function() {
 
					});
				}else{
					$(".J_page2").hide();
					$(".J_page1").fadeIn('slow', function() {});
				}
 
			},1000*60);
 
		});
	</script>
	<style>html{font-size: 115.9375px !important;}</style>
</head>
<body>
<input type="hidden" id="school" value="上海" />
<div class="g-title">
	XX大学-迎新实时大数据
</div>
<div class="g-sub-title">
	<div class="time" id="time">
		2023-04-04 星期二 10:19:25
	</div>已报到人数
	<em id="factTotalNum">12030</em>人
</div>
<div class="g-grid-a g-total-data">
	<a class="g-block"> 录取人数 <span id="totalNum">10131</span> </a>
	<a class="g-block"> 报到占比 <span id="totalNumRate">99.5%</span> </a>
</div>
<div class="g-left left-wrap">
	<div class="g-box J_page1">
		<div class="box-title">
			<img src="./static/images/img12.png" />
		</div>
		<div class="box-content">
			<div class="g-grid-a part1">
				<a class="g-block" id="bd1" href="https://www.maotouyingcc.com/category/bishe/" onclick="hqbdzbqk(this.id);"> <em id="manNumsRate">99%</em> <span>男生</span> <label id="factMan">男生报到5717/5774人</label> </a>
				<a class="g-block" id="bd0" href="" onclick="hqbdzbqk(this.id);"> <em id="womanNumsRate">98.9%</em> <span>女生</span> <label id="factWoman">女生报到4313/4357人</label> </a>
			</div>
			<div class="item-box part2">
				<div class="item-title">
					报到人数前八省份
				</div>
				<div class="item-content">
					<dl id="originRegisterRate">
						<dd id="河南" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>上海</label>
							<span class="line"><span style="width: 95.3%"></span></span>6791
						</dd>
						<dd id="安徽" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>安徽</label>
							<span class="line"><span style="width: 93.7%"></span></span>2314
						</dd>
						<dd id="河北" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>河北</label>
							<span class="line"><span style="width: 90.6%"></span></span>290
						</dd>
						<dd id="山西" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>山西</label>
							<span class="line"><span style="width: 88.7%"></span></span>235
						</dd>
						<dd id="山东" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>山东</label>
							<span class="line"><span style="width: 87.3%"></span></span>219
						</dd>
						<dd id="四川" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>四川</label>
							<span class="line"><span style="width: 82%"></span></span>218
						</dd>
						<dd id="湖南" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>湖南</label>
							<span class="line"><span style="width: 80.8%"></span></span>137
						</dd>
						<dd id="江苏" style="cursor:pointer;" href="" onclick="hqsyyxrs(this.id);">
							<label>江苏</label>
							<span class="line"><span style="width: 80.1%"></span></span>122
						</dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
	<div class="g-box J_page2 hide">
		<div class="box-title">
			<img src="./static/images/img15.png" />
		</div>
		<div class="box-content">
			<div class="g-grid-a part1">
				<a class="g-block" id="rz1" href="" onclick="hqbdzbqk(this.id);"> <em id="manNumsRate2">99%</em> <span>男生</span> <label id="factMan2">男生报到5717/5774人</label> </a>
				<a class="g-block" id="rz0" href="" onclick="hqbdzbqk(this.id);"> <em id="womanNumsRate2">98.9%</em> <span>女生</span> <label id="factWoman2">女生报到4313/4357人</label> </a>
			</div>
			<div class="item-box part6">
				<div class="item-title">
					新生民族分布
				</div>
				<div class="item-content" id="stuNation" _echarts_instance_="ec_1680574754438" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
					<div style="position: relative; overflow: hidden; width: 367px; height: 288px; padding: 0px; margin: 0px; border-width: 0px;">
						<canvas data-zr-dom-id="zr_0" width="367" height="288" style="position: absolute; left: 0px; top: 0px; width: 367px; height: 288px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
					</div>
					<div></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="g-left center-wrap">
	<div class="J_page1">
		<h2>生源地报到分布</h2>
		<div class="map-box" id="map" _echarts_instance_="ec_1680574754437" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
			<div style="position: relative; overflow: hidden; width: 656px; height: 499px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
				<canvas data-zr-dom-id="zr_0" width="656" height="499" style="position: absolute; left: 0px; top: 0px; width: 656px; height: 499px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
				<canvas data-zr-dom-id="zr_2" width="656" height="499" style="position: absolute; left: 0px; top: 0px; width: 656px; height: 499px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
			</div>
			<div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 166px; top: 90px;">
				报到人数
				<br />新疆: 55
			</div>
		</div>
	</div>
	<div class="J_page2 hide">
		<div class="item-box table-box part7">
			<img src="./static/images/img19.png" class="title" />
			<ul class="g-clear item-content" style="margin-bottom: 0;" id="part7">
				<li class="item-sub-title"><span>院系</span><span>报到/录取人数</span><span>男生录取人数</span><span>女生录取人数</span><span>报到率</span></li>
			</ul>
			<div class="J_Box1" style="height: 3.3rem;overflow: hidden;">
				<ul class="g-clear item-content" id="collegeMessage">
					<li id="9999" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>第二学士学位</span><span>23/25</span><span>12</span><span>13</span><span>92%</span></li>
					<li id="0117" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>国际教育学院</span><span>728/749</span><span>335</span><span>414</span><span>97.1%</span></li>
					<li id="0123" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>环境工程学院</span><span>250/257</span><span>158</span><span>99</span><span>97.2%</span></li>
					<li id="0103" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>土木工程学院</span><span>573/584</span><span>472</span><span>112</span><span>98.1%</span></li>
					<li id="0106" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>生物工程学院</span><span>473/480</span><span>241</span><span>239</span><span>98.5%</span></li>
					<li id="0107" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>材料科学与工程学院</span><span>507/514</span><span>396</span><span>118</span><span>98.6%</span></li>
					<li id="0109" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>明德书院-管理学院(MBA教育中心)</span><span>436/441</span><span>155</span><span>286</span><span>98.8%</span></li>
					<li id="0102" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>机电工程学院</span><span>633/640</span><span>569</span><span>71</span><span>98.9%</span></li>
					<li id="0108" href="" style="cursor:pointer;" onclick="hvzybdsj(this.id)"><span>电气工程学院</span><span>539/544</span><span>453</span><span>91</span><span>99%</span></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="g-right right-wrap">
	<div class="g-box J_page1">
		<div class="box-title">
			<img src="./static/images/img13.png" />
		</div>
		<div class="box-content">
			<div class="item-box part3">
				<div class="item-title">
					各时段报到人数
				</div>
				<div class="item-content" id="registerDate" _echarts_instance_="ec_1680574754435" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
					<div style="position: relative; overflow: hidden; width: 410px; height: 217px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
						<canvas data-zr-dom-id="zr_0" width="410" height="217" style="position: absolute; left: 0px; top: 0px; width: 410px; height: 217px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
					</div>
					<div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 69px; top: 21.7px;">
						08:00
						<br />
						<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f93b08;"></span>报到人数: 10,018
					</div>
				</div>
			</div>
			<div class="item-box part4">
				<div class="item-title">
					各时段报到率
				</div>
				<div class="item-content" id="registerDateRate" _echarts_instance_="ec_1680574754436" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
					<div style="position: relative; overflow: hidden; width: 403px; height: 217px; padding: 0px; margin: 0px; border-width: 0px;">
						<canvas data-zr-dom-id="zr_0" width="403" height="217" style="position: absolute; left: 0px; top: 0px; width: 403px; height: 217px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
					</div>
					<div></div>
				</div>
			</div>
		</div>
	</div>
	<div class="g-box J_page2 hide">
		<div class="box-title">
			<img src="./static/images/img16.png" />
		</div>
		<div class="box-content">
			<div class="g-grid-d part8" id="affairWork">
				<a class="g-block"><img src="./static/images/img0.png" /></a>
				<a class="g-block" id="14344620382430" style="cursor:pointer;" href="" onclick="selectAffairNumByYx(this.id)">99<em>.0%</em><span>学院报到</span></a>
			</div>
			<div class="item-box part9">
				<div class="item-title">
					新生年龄段统计
				</div>
				<div class="item-content" id="sutdentAge" _echarts_instance_="ec_1680574754439" style="-webkit-tap-highlight-color: transparent; user-select: none;">
					<div style="position: relative; overflow: hidden; width: 370px; height: 140px; padding: 0px; margin: 0px; border-width: 0px;">
						<canvas data-zr-dom-id="zr_0" width="370" height="140" style="position: absolute; left: 0px; top: 0px; width: 370px; height: 140px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
					</div>
				</div>
			</div>
			<div class="item-box table-box part10">
				<div class="item-title">
					专业报到率前四
				</div>
				<ul class="g-clear item-content" style="margin-bottom: 0;">
					<li class="item-sub-title"><span>排名</span><span>专业</span><span>报到/录取人数</span><span>报到率</span></li>
				</ul>
				<div class="item-content">
					<ul class="g-clear" id="majorMessage">
						<li><span><img src="./static/images/num1.png" /></span><span>应用统计学</span><span>96/96</span><span>100%</span></li>
						<li><span><img src="./static/images/num2.png" /></span><span>化学工程与工艺</span><span>130/130</span><span>100%</span></li>
						<li><span><img src="./static/images/num3.png" /></span><span>生物工程</span><span>128/128</span><span>100%</span></li>
						<li><span><img src="./static/images/num4.png" /></span><span>经济贸易学院</span><span>95/95</span><span>100%</span></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="clear"></div>
<div class="part5" id="registerStudentMessage">
	<div class="swiper-container swiper-container-coverflow swiper-container-3d swiper-container-horizontal" style="cursor: grab;">
		<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3093.75px, 0px, 0px); perspective-origin: 3781.25px 50%;">
			<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="6" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -1050px) rotateX(0deg) rotateY(-262.5deg); z-index: -10;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						机电工程学院
					</dd>
					<dd class="time">
						马祖榕 11:03
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -949.927px) rotateX(0deg) rotateY(-237.482deg); z-index: -8;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						机电工程学院
					</dd>
					<dd class="time">
						曹晨浩 18:38
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -849.855px) rotateX(0deg) rotateY(-212.464deg); z-index: -7;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						研究生院
					</dd>
					<dd class="time">
						晋紫君 18:02
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="9" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -750.073px) rotateX(0deg) rotateY(-187.518deg); z-index: -7;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						研究生院
					</dd>
					<dd class="time">
						李帅 18:26
					</dd>
				</dl>
			</div>
			<div class="swiper-slide" data-swiper-slide-index="0" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -650px) rotateX(0deg) rotateY(-162.5deg); z-index: -6;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						材料科学与工程学院
					</dd>
					<dd class="time">
						李发茂 17:03
					</dd>
				</dl>
			</div>
			<div class="swiper-slide" data-swiper-slide-index="1" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -549.927px) rotateX(0deg) rotateY(-137.482deg); z-index: -4;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						国际教育学院
					</dd>
					<dd class="time">
						舒玉凤 09:57
					</dd>
				</dl>
			</div>
			<div class="swiper-slide" data-swiper-slide-index="2" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -449.855px) rotateX(0deg) rotateY(-112.464deg); z-index: -3;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						计算机学院
					</dd>
					<dd class="time">
						郑惟 09:57
					</dd>
				</dl>
			</div>
			<div class="swiper-slide" data-swiper-slide-index="3" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -350.073px) rotateX(0deg) rotateY(-87.5182deg); z-index: -3;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						外国语学院
					</dd>
					<dd class="time">
						赵喜龙 09:57
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="4" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -250px) rotateX(0deg) rotateY(-62.5deg); z-index: -2;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						土建学院
					</dd>
					<dd class="time">
						李爽爽 09:57
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="5" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -149.927px) rotateX(0deg) rotateY(-37.4818deg); z-index: 0;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						法学院
					</dd>
					<dd class="time">
						聂楷 09:57
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="6" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -49.8545px) rotateX(0deg) rotateY(-12.4636deg); z-index: 1;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						机电工程学院
					</dd>
					<dd class="time">
						马祖榕 11:03
					</dd>
				</dl>
			</div>
			<div class="swiper-slide" data-swiper-slide-index="7" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -49.9273px) rotateX(0deg) rotateY(12.4818deg); z-index: 1;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						机电工程学院
					</dd>
					<dd class="time">
						曹晨浩 18:38
					</dd>
				</dl>
			</div>
			<div class="swiper-slide" data-swiper-slide-index="8" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -150px) rotateX(0deg) rotateY(37.5deg); z-index: 0;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						研究生院
					</dd>
					<dd class="time">
						晋紫君 18:02
					</dd>
				</dl>
			</div>
			<div class="swiper-slide" data-swiper-slide-index="9" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -250.073px) rotateX(0deg) rotateY(62.5182deg); z-index: -2;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						研究生院
					</dd>
					<dd class="time">
						李帅 18:26
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -350.145px) rotateX(0deg) rotateY(87.5364deg); z-index: -3;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						材料科学与工程学院
					</dd>
					<dd class="time">
						李发茂 17:03
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -449.927px) rotateX(0deg) rotateY(112.482deg); z-index: -3;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						国际教育学院
					</dd>
					<dd class="time">
						舒玉凤 09:57
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -550px) rotateX(0deg) rotateY(137.5deg); z-index: -4;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						第二学士学位
					</dd>
					<dd class="time">
						郑惟 09:57
					</dd>
				</dl>
			</div>
			<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" style="width: 343.75px; transition-duration: 0ms; transform: translate3d(0px, 0px, -650.073px) rotateX(0deg) rotateY(162.518deg); z-index: -6;">
				<dl>
					<dt>
						最新报到学生
					</dt>
					<dd>
						国际教育学院
					</dd>
					<dd class="time">
						赵喜龙 09:57
					</dd>
				</dl>
			</div>
		</div>
		<div class="swiper-pagination swiper-pagination-bullets">
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
		</div>
		<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
	</div>
	<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
	<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
</div>
</body>
 
<script>
 
 
 
</script>
 
 
</html>
复制

css文件；

 
.swiper-container-no-flexbox .swiper-slide {
	float: left
}
 
.swiper-container-vertical>.swiper-wrapper {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column
}
 
.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	-o-transition-property: transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	-webkit-box-sizing: content-box;
	box-sizing: content-box
}
 
.swiper-container-android .swiper-slide, .swiper-wrapper {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
 
.swiper-container-multirow>.swiper-wrapper {
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}
 
.swiper-container-free-mode>.swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto
}
 
.swiper-slide {
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	-o-transition-property: transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform
}
 
.swiper-invisible-blank-slide {
	visibility: hidden
}
 
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
	height: auto
}
 
.swiper-container-autoheight .swiper-wrapper {
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-transition-property: height, -webkit-transform;
	transition-property: height, -webkit-transform;
	-o-transition-property: transform, height;
	transition-property: transform, height;
	transition-property: transform, height, -webkit-transform
}
 
.swiper-container-3d {
	-webkit-perspective: 1200px;
	perspective: 1200px
}
 
.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}
复制

作品来自于网络收集、侵权立删 

由于js和css过多，上面只粘主页代码，其它的自行下载即可

源码获取

大家点赞、收藏、关注、评论啦 、联系下方获取👇🏻👇🏻👇🏻

专栏推荐阅读：

2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅

2024最新精品毕业设计项目，已整理自取

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18193.html
标签
数据分析大屏端数据挖掘
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！