HTML5+css+JS实现LOL官网动态页面DW、vscode页眉加轮播图

DW做LOL官网页面html5+css+JS页眉加轮播图

css部分

这里rgba颜色代码看自己喜欢更改

/*总体*/
	*{margin:0;padding:0;}
	html{background: url("001.jpg")no-repeat;}
	a{text-decoration:none;color:white;}
	ul{list-style:none;}
	/*页眉*/
	.jianbian{position: absolute;top:0px;left:0px;width:1902px;height: 120px;background: repeating-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0));}
	.tubiao{position:absolute;top:10px;left:275px;}
	.guanggao1{width:780px;height:100px;position: absolute;top:-8px;left:435px;}
	.guanggao1 li{width: 100px;text-align: center;padding:24px;float: left;}
		.font1{color: white;font-size: 19px;}
		.font2{ color:#A4A4A4;font-size: 12px;}
	.guanggao2{width:1902px;height: 360px;background: rgba(0,0,0,0.6);}
	.guanggao2 li{text-align:center;font-size: 13px;margin:10px 0 10px 0;}
	.guanggao2 a:hover{color:#D3B529;}
		.gg1{position:absolute;top:2px;left:430px;}
		.gg2{position:absolute;top:2px;left:570px;}
		.gg3{position:absolute;top:2px;left:720px;}
		.gg4{position:absolute;top:2px;left:870px;}
		.gg5{position:absolute;top:2px;left:1020px;}
		.ggN{position: relative;right:5px;top:4px;}
	#gg-beijing{height: 280px;width: 1902px;position: relative;top:80px;}
	#guanggao1{display: block;}
	#guanggao2{display: none;}
	
	#biao1{position:absolute;top:17px;left:1260px;display: block;}
	#biao1-sc{font-size:14px;width:40px;background: white;text-align: center;position: absolute;top:50px;display: none;}
	#biao2{position:absolute;top:14px;left:1318px;display: block;}
	#biao2-zm{width:205px;height:170px;background: rgba(0,0,0,0.7);position: absolute;top:60px;left:-85px;display: none;}
		.biao2-zm-ma{margin:15px 20px 0 43px;}
		.biao2-zm-p{text-align: center; font-size:12px;color:#D3B529;}
		.biao2-zm-polo{position: absolute;top:120px;left:165px;}
	#geren{width: 300px;height: 60px;position:absolute;top:0px;left:1365px;display: block;}
		.biao3{position:absolute;top:6px;left:7px;z-index: 9999;}
		.denglu{font-size: 16.2px;color: white;position: absolute;top:27px;left:80px;z-index: 9999;}
	#geren-zx{width:310px;height:170px;position: absolute;top:0px;left:0px;display: none;}
		.geren-bj{font-size:10px;color: gray;text-align: center;background: rgba(0,0,0,0.7);height:105px;padding-top:100px;}
		.geren-jr{font-size:15px;color: white;text-align: center;background: black;height: 38px;line-height: 35px;}
		.lianjie1{color:antiquewhite;}
		.lianjie2{color:#daa520;}
		.lianjie3{color:#D3B529;}
		.chakan{width:160px;height: 37px;background:rgba(0,0,0,0.65);text-align: center;line-height: 35px;color: #DD975C;font-size: 14px;border-top:0.02px #514007 solid;border-right:0.02px #9D8629 solid;border-bottom:0.02px #9D801E solid;border-left:0.02px #837018 solid;position: absolute;top:290px;left:885px;}
		.banben{position:absolute;top:308px;left:1380px;}
		.banben1{color:gray;font-size:14px;}
		.banben2{color:#EAD679;font-size:13px;}
		.banben3{width:85px;height:23px;background:rgba(0,0,0,0.65);text-align: center;line-height: 22px;font-size: 12px;border-top:2px #514007 solid;border-right:2px #9D8629 solid;border-bottom:2px #D3B529 solid;border-left:2px #9D8629 solid;position: absolute;top:305px;left:1555px;}
	/*中部*/
	
		/*轮播图*/
		#outer{width:820px;height: 380px;position:absolute;top:400px;left: 275px;overflow: hidden;}
		#imgList{height: 340px;width: 500%;list-style:none;position: absolute;top:0;left:0;}
		#imgList li{height: 340px; float:left;}
		
		#navDiv{width:820px;height: 40px;position: absolute;top:340px;background-color:rgba(211,211,211,0.45);list-style: none;}
		#navDiv li{font-size: 14px;text-align: center;line-height: 38px;float: left;border-bottom:2px rgba(0,0,0,0) solid;}
		#navDiv li:hover{background-color: white;color: #daa520;border-bottom:2px #daa520 solid;}
		.current{background-color: white;color: #daa520;border-bottom:2px #daa520 solid;}

html部分

<header id="header">
		<div class="jianbian">div>
		<div class="tubiao"><a href="#"><img src="logo-public.png">a>div>
		<div class="guanggao1" id="guanggao1">
			<ul>
				<li><span class="font1">游戏资料span><span class="font2">GAME INFOspan>li>
				<li><span class="font1">商城合作span><span class="font2">STOREspan>li>
				<li><span class="font1">社区互动span><span class="font2">COMMUNITYspan>li>
				<li><span class="font1">赛事官网span><span class="font2">ESPORTSspan>li>
				<li><span class="font1">自助系统span><span class="font2">SYSTEMspan>li>
			ul>
		div>
		
		<div class="chakan"><a href="#" class="lianjie2">查看详情a>div>
		<div class="banben"><span class="banben1">当前游戏版本：span> <span class="banben2">Ver 10.24span>div>
		<div class="banben3"><a href="#" class="lianjie3">版本详情a>div>
		
		<div class="guanggao2" id="guanggao2">
			<div id="gg-beijing">
			<ul class="gg1">
				<li><a href="#">游戏下载a>li>
				<li><a href="#">新手指引a>li>
				<li><a href="#">资料库a>li>
				<li><img src="N.png" class="ggN"><a href="#">云顶之弈a>li>
				<li><img src="N.png" class="ggN"><a href="#">功略中心a>li>
				<li><a href="#">开发者基地a>li>
				<li><a href="#">海克斯战利品库a>li>
				<li><a href="#">英雄联盟宇宙a>li>
			ul>
			<ul class="gg2">
				<li><a href="#">点券充值a>li>
				<li><img src="H.png" class="ggN"><a href="#">道聚城a>li>
				<li><a href="#">周边商城a>li>
				<li><a href="#">LOL桌游a>li>
				<li><a href="#">网吧特权a>li>
				<li><a href="#">电竞小说a>li>
				<li><img src="N.png" class="ggN"><a href="#">作者入驻计划a>li>
			ul>
			<ul class="gg3">
				<li><a href="#">官方社区a>li>
				<li><a href="#">视频中心a>li>
				<li><a href="#">官方论坛a>li>
				<li><a href="#">官方微信a>li>
				<li><a href="#">官方微博a>li>
				<li><a href="#">玩家创作馆a>li>
				<li><a href="#">玩家服务a>li>
				<li><img src="N.png" class="ggN"><a href="#">LOL组队专区a>li>
			ul>
			<ul class="gg4">
				<li><img src="H.png" class="ggN"><a href="#">LPL职业联赛a>li>
				<li><a href="#">LDL发展联赛a>li>
				<li><img src="H.png" class="ggN"><a href="#">全球总决赛a>li>
				<li><a href="#">城市英雄争霸赛a>li>
				<li><img src="N.png" class="ggN"><a href="#">季中杯a>li>
				<li><a href="#">德玛西亚杯a>li>
				<li><a href="#">全国高校联赛a>li>
				<li><img src="N.png" class="ggN"><a href="#">云顶之弈公开赛a>li>
			ul>
			<ul class="gg5">
				<li><a href="#">联系客服a>li>
				<li><img src="N.png" class="ggN"><a href="#">转区系统a>li>
				<li><img src="H.png" class="ggN"><a href="#">封号查询a>li>
				<li><a href="#">账号注销a>li>
				<li><img src="N.png" class="ggN"><a href="#">信誉分系统a>li>
				<li><a href="#">服务器状态查询a>li>
				<li><a href="#">秩序殿堂a>li>
				<li><a href="#">峡谷之巅a>li>
			ul>
			div>
		div>
		<div id="biao1"><a href="#"><img src="标1.png" height="40px">a>
			<div id="biao1-sc">搜索div>
		div>
		<div id="biao2"><a href="#"><img src="标2.png" height="44px">a>
			<div id="biao2-zm">
				<img src="zm.jpg" width="119" height="119" class="biao2-zm-ma">
				<p class="biao2-zm-p">扫码下载掌上英雄联盟p>
				<img src="polo.gif" width="50" height="50" class="biao2-zm-polo">
			div>
		div>
		<div id="geren">
			<div class="biao3"><img src="标3.png" height="65px">div>
			<div class="denglu">亲爱的召唤师，欢迎<a href="#" class="lianjie1">登录a>div>
			<div id="geren-zx">
				<div class="geren-bj">
					<p>登录并且绑定大区后才可以查看您的具体信息哦p>
					<p>（包括战绩、资产、声望）p>
					<p>p>
					<p>官网个人信息显示略有延迟，请以游戏数据为准p>
				div>
				<a href="#"><div class="geren-jr">进入个人中心    →div>a>
			div>
		div>	
	header>
	
	
			<div id="outer">
				<ul id="imgList">
					<li><a href="#"><img src="1.jpeg">a>li>
					<li><a href="#"><img src="2.jpeg">a>li>
					<li><a href="#"><img src="3.jpeg">a>li>
					<li><a href="#"><img src="4.jpeg">a>li>
					<li><a href="#"><img src="5.jpeg">a>li>
				ul>
				<ol id="navDiv">
					<li style="width: 164px">星座诸神 集结成阵li>
					<li style="width: 164px">2021季前赛 开创神话li>
					<li style="width: 164px">命运之轮通行证li>
					<li style="width: 164px">K/DA系列 小小英雄li>
					<li style="width: 164px">每周限时优惠li>
				ol>
			div>

JS部分

<script>
document.getElementById("guanggao1").onmouseover=function(){
	document.getElementById("guanggao2").style.display='block';
	}
document.getElementById("gg-beijing").onmouseover=function(){
	document.getElementById("guanggao2").style.display='block';
	}
document.getElementById("guanggao1").onmouseout=function(){
	document.getElementById("guanggao2").style.display='none';
	}
document.getElementById("header").onmouseout=function(){
	document.getElementById("guanggao2").style.display='none';
	}

document.getElementById("biao1").onmouseover=function(){
	document.getElementById("biao1-sc").style.display='block';
	}
document.getElementById("biao1").onmouseout=function(){
	document.getElementById("biao1-sc").style.display='none';
	}

document.getElementById("biao2").onmouseover=function(){
	document.getElementById("biao2-zm").style.display='block';
	}
document.getElementById("biao2").onmouseout=function(){
	document.getElementById("biao2-zm").style.display='none';
	}

document.getElementById("geren").onmouseover=function(){
	document.getElementById("geren-zx").style.display='block';
	}
document.getElementById("geren").onmouseout=function(){
	document.getElementById("geren-zx").style.display='none';
	}

</script>
	
<script type="text/javascript" src="donghua.js"></script>
	<script>
		window.onload=function(){
			//获取图片ul
			var imgList=document.getElementById("imgList");
			//获取所有图片img标签
			var imgArr=document.getElementById("imgList").getElementsByTagName("img");
			//设置图片ul宽度
			imgList.style.width=820*imgArr.length+"px";
			
			var imgDiv=document.getElementById("navDiv");
			var outer=document.getElementById("outer");
			//默认图片索引
			var index=0;
			//获取文字按钮
			var allol=outer.getElementsByTagName("ol");		
			var allli=allol[0].getElementsByTagName("li");
			allli[index].className="current";
			allli[index].style.borderBottom="2px #daa520 solid";
			
			//滑过事件
			for(var i=0; i<allli.length; i++){
				//为图片添加索引num属性
				allli[i].num=i;
				allli[i].onmouseover=function(){
					//关闭定时器
					clearInterval(timer);
					//获取索引
					index=this.num;
					//切换图片
					/*
					第一张0 0
					第二张1 -820
					第三张2 -1640
					...
					imgList.style.left=-820*index+"px";
					*/
					//调用创建的set方法
					set();
					//使用动画引入move函数 滑动轮播效果
					move(imgList,"left",-820*index,200,function(){
						
					});
				};
				allli[i].onmouseout=function(){
					setInterval(autoChange());
				}
			};
			//调用autoChange切换图片
			autoChange();
			//创建一个方法修改选中
			function set(){
				for(var i=0;i<allli.length;i++){
					allli[i].className="";
					allli[i].style.borderBottom="";
				};
				allli[index].className="current";
				allli[index].style.borderBottom="2px #daa520 solid";
			};
			//定义定时器
			var timer;
			//自动切换图片 并控制停止
			function autoChange(){
				//开启定时器
				timer=setInterval(function(){
					//索引自增 并判断
					index++;
					index %=imgArr.length;
					//执行动画
					move(imgList,"left",-820*index,200,function(){
						//修改导航set跟随
						set();
					});
				},3000);
			}
		}
	</script>

轮播图引用的动画效果JS如下：

function move(obj , attr , target , speed , callback){
	clearInterval(obj.timer);
	var current=parseInt(getStyle(obj,attr));
		if(current>target){
		speed=-speed;
		}
	obj.timer=setInterval(function(){
		var oldValue=parseInt(getStyle(obj,attr));
		var newValue=oldValue+speed;
		if((speed<0 && newValue<target)||(speed>0 && newValue>target)){
			newValue=target;
		}
	obj.style[attr]=newValue+"px";
		if(newValue==target){
		clearInterval(obj.timer);
		callback && callback();
		}
	},30);
}
function getStyle(obj,name){
	if(window.getComputedStyle){
		return getComputedStyle(obj,null)[name];
	}else{
		return obj.currentStyle[name];
	}
}

只做了一部分 还有其他列表和图片事件 以后有时间补上

很多图片原官网就能复制到 个别只能P出来用