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> <span class="banben2">Ver 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出来用
