HTML5+css+JS實作LOL官網動態頁面DW頁眉加輪播圖-有解無憂

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 INFO</span></li>
				<li><span class="font1">商城合作</span><span class="font2">STORE</span></li>
				<li><span class="font1">社區互動</span><span class="font2">COMMUNITY</span></li>
				<li><span class="font1">賽事官網</span><span class="font2">ESPORTS</span></li>
				<li><span class="font1">自助系統</span><span class="font2">SYSTEM</span></li>
			</ul>
		</div>
		
		<div class="chakan"><a href="#" class="lianjie2">查看詳情</a></div>
		<div class="banben"><span class="banben1">當前游戲版本：</span>&nbsp;<span class="banben2">Ver&nbsp;10.24</span></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出來用

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229210.html

標籤：其他

上一篇：Vuejs基礎入門

下一篇：微信小程式輪播圖swiper詳細代碼介紹