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 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(){//获取图片ulvar 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出来用

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

web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）
前端搭建(HTML+CSS+JS)游戏官网(或其它)页面------实例与代码(示例:游戏官网界面) 注意:网页中的示例图片均出自米哈游–原神官网设计,如侵权,联系博主立马进行删除. 目标:网页实现前 ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里 ...
html css js项目总结-官网
项目介绍:官网展示技术点:js,html,css,swiper轮播,pdjjs文档在页面预览加载首页: 1布局场景一.左边img 中间是两头虚线中间实线右边文字结构如下:<div cla ...
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
HTML+CSS+JS实现原神官网静态页面
1. 需求概述客户需要一份能够吸引玩家的官网页面 1.1 术语解释 HTML:HTML是超文本标记语言,(英语:HyperText Markup Language,简称:HTML),是一种用来创建网 ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
JS完结：用JavaScript写个功能完善的电商轮播图
轮播图:自动轮播+点击对应点切换+下一张+菜单导航先讲思路,再上代码: 先拿HTML整体布局,先轮播图,然后对应小圆点点击跳转,上一张和下一张. 然后左侧菜单栏的布局,鼠标移上去显示不同内容. CS ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...

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

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

最新文章

热门文章