前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）

注意：网页中的示例图片均出自米哈游–原神官网设计，如侵权，联系博主立马进行删除。

目标：网页实现前端图片＋文字显示（轮播图片+文字）。代码重点：轮播等等。

头部logo部分

HTML代码：

<div class="navbar"><div class="logo"><a href="html.html"><img src="logo.png"></a></div><div class="word"><span><a href="web2.html">公司简介</a></span></div><div class="word1"><span><a href="web3.html">社会招聘</a></span></div><span class="word1"><a href="web4.html">加入我们</a></span><span class="word1"><a href="web5.html">联系我们</a></span><span class="word1"><a href="web6.html">米哈游成长关爱平台</a></span></div>

CSS代码：

.navbar{width: 100%;height: 100px;background-color:#fff;border-bottom: 3px solid #4cd7e8;margin-bottom: 0px;position: relative;text-align: center;cursor: pointer;
}
.navbar .logo{width: 214px;height: 94px;float: left;margin-left: 250px;padding-top:10px;
}
.word{padding-left:150px;padding-top:  50px;font-size: 20px;float: left;
}
a{text-decoration: none;color: aqua;
}
.word1{padding-left:50px;padding-top: 50px;font-size: 20px;float: left;
}

头部主要作用是给用户起到一个导航和了解的作用。

（重点）轮播图

HTML代码：

<div id= "parent"><div id="uls"><ul id="img_ul"><li><img src="1.jpg"/></li><li><img src="2.jpg"/></li><li><img src="3.jpg"/></li></ul><ul id='litCir_ul'></ul></div><div id="buttons"><span id="left">&lt;</span><span id="right">&gt;</span></div></div>

CSS代码：

#parent{position: relative;margin: 50px auto;padding: 0;width: 1500px;height: 600px;
}#uls{position: relative;margin: 0;padding: 0;width: 1500px;height: 600px;overflow: hidden;
}#img_ul{position: absolute;margin: 0;padding: 0;left: 0;top: 0;width: 6000px;           /*多留出一张图片的宽度！*/list-style: none;
}
#img_ul li{float: left;margin: 0;padding: 0;width: 1500px;height: 600px;
}
#img_ul li img{width: 1500px;height: 600px;
}#litCir_ul{position: absolute;margin: 0;padding: 0;right: 10px;bottom: 10px;list-style: none;
}
#litCir_ul li{margin: 0;padding: 0;float: left;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius: 50%; margin-left:10px ;cursor: pointer;
}
li.active{background-color: white;
}
li.quiet{background-color: #1e90ff;
}#buttons{margin: 0;padding: 0;display: none;
}
#buttons span{position: absolute;width: 40px;height: 40px;top: 50%;margin-top: -20px;line-height: 40px;text-align: center;font-weight: bold;font-family: Simsun;font-size: 30px;border: 1px solid #fff;opacity: 0.3;cursor: pointer;color: #fff;background: black;
}
#left{left: 5px;
}
#right{left: 100%;margin-left: -45px;
}

JS代码：

var parent = document.getElementById("parent");var img_ul = document.getElementById("img_ul");var litCir_ul = document.getElementById("litCir_ul");var buttons = document.getElementById("buttons");var cLis =litCir_ul.children;var len = img_ul.children.length;     //图片张数var width = parent.offsetWidth;       //每张图片的宽度var rate = 15;                        //一张图片的切换速度， 单位为pxvar times = 1;                        //切换速度的倍率var gap = 4000;                       //自动切换间隙， 单位为毫秒var timer = null;                     //初始化一个定时器var picN = 0;                         //当前显示的图片下标var cirN = 0;                         //当前显示图片的小圆点下标var temp;for (var i=0; i<len; i++){var a_li = document.createElement("li");a_li.className = 'quiet';litCir_ul.appendChild(a_li);}litCir_ul.children[0].className = "active";function Roll(distance){                                         //参数distance：滚动的目标点（必为图片宽度的倍数）clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器！var speed = img_ul.offsetLeft < distance ?  rate : (0-rate);     //判断图片移动的方向img_ul.timer = setInterval(function(){                           //设置定时器，每隔10毫秒，调用一次该匿名函数img_ul.style.left = img_ul.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         var leave = distance - img_ul.offsetLeft;                    //距目标点剩余的px值      /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/if (Math.abs(leave) <= Math.abs(speed)) {                    clearInterval(img_ul.timer);img_ul.style.left = distance + "px";}},10);}img_ul.appendChild(img_ul.children[0].cloneNode(true));function autoRun(){picN++;cirN++;if(picN > len){                  //滚动完克隆项后img_ul.style.left = 0;       //改变left至真正的第一项处picN = 1;                    //从第二张开始显示}Roll(-picN*width);if(cirN > len-1){                //判断是否到了最后一个圆点cirN = 0;                 }for(var i=0; i<len; i++){cLis[i].className = "quiet";}cLis[cirN].className = "active";}for(var i=0; i<len; i++){cLis[i].index = i;cLis[i].onmouseover = function(){for(var j=0; j<len; j++){cLis[j].className = "quiet";}this.className = "active";temp = cirN;picN = cirN = this.index;times = Math.abs(this.index - temp);  //距离上个小圆点的距离rate = rate*times;                    //根据距离改变切换速率Roll(-this.index * width);rate = 15;}}parent.onmouseover = function(){clearInterval(timer);buttons.style.display = 'block';}parent.onmouseout = function(){timer = setInterval(autoRun, gap);buttons.style.display = 'none';}buttons.children[0].onclick = function(){ picN--;cirN--;if(picN < 0){                               //滚动完第一项后img_ul.style.left = -len*width + "px";  //改变left至克隆的第一项处picN = cirN = len-1;}Roll(-picN*width);//bug处理if(cirN < 0){cirN = len-1;}for(var i=0; i<len; i++){cLis[i].className = "quiet";}cLis[cirN].className = "active";}/*下一张*/buttons.children[1].onclick = autoRun;
var next=document.getElementsByClassName("next")[0];
next.onclick=text;

注意：轮播图中的图片数量与大小可以修改。修改图片大小时，在CSS代码中更改“#parent” ，“#uls”，“#img_ul li”，“#img_ul li img”的宽和高，必须保持其一致性，并且“#img_ul”中的宽度设置为（图片数量+1）*图片宽度（以保证空出一张图片的位置作为交替缓冲区）。

轮播实现效果：当鼠标移动到轮播图片上时，图片会自动进行轮播效果（自动播放的速度可在JS代码函数中调整）。在图片的最左/右侧，可点击进行图片的左右切换。并且在图片的右下角有对应图片数量的小圆角，也可进行图片的任意切换

中央板块部分：

HTML代码：

<div id="text"><div class="smallbox"></div><ul class="imges"><img src="index-nav-8.jpg"></ul></div><div class="box1"><ul class="imges"><img src="index-nav-9.jpg"></ul></div><div class="box2"><ul class="imges"><img src="index-nav-11.jpg"></ul></div><div class="box3"><ul class="imges"><img src="index-nav-10.jpg"></ul></div><div class="box4"><ul class="imges"><img src="index-nav-12.jpg"></ul></div>

CSS代码：

#text{width: 320px;height: 466px;background-color: aqua; margin-top: 100px;left: 250px;float: left;position: relative;
}
#text.smallbox{width: 320px;height: 50px;background-color: rgba(0,0,0,1.00);float: left;
}.box1{width: 320px;height: 223px;background-color: aqua;margin-top: 100px;margin-left: 285px;float: left;
}
.box2{width: 320px;height: 223px;background-color: aquamarine;float: left;margin-top: 100px;margin-left: 15px;
}
.box3{width: 320px;height: 223px;background-color: antiquewhite;float: left;margin-top: 15px;margin-left: 285px;
}
.box4{width: 320px;height: 223px;background-color: aquamarine;float: left;margin-top: 15px;margin-left: 15px;
}
.imges{cursor: pointer;transition:  0.5s;
}
.imges:hover{transform: scale(1.1);
}

页脚部分

HTML代码

<div class="foot"><div class="pulogo"><img src="页脚logo.png"></div><div class="ad"><a>隐私政策 | 关于我们 | 联系我们 | 加入我们</a></div><div class="cg"><span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span></div><div class="litle"><img src="img/1.jpg"></div><div class="litle"><img src="img/2.jpg"></div><div class="litle"><img src="img/3.jpg"></div><div class="litle"><img src="img/4.jpg"></div><div class="litle"><img src="img/5.jpg"></div><div class="litle"><img src="img/6.jpg"></div></div>

CSS代码

.foot{width: 1520px;height: 401px;background-color: black;margin-top: 100px;float: left;
}
.pulogo{width: 216px;height: 76px;margin-left: 60px;margin-top: 162.5px;float: left;
}
.ad{width: 820.24px;height: 52px;margin-top: 50px;margin-left: 470px;font-size: 20px;color: #fff;cursor: pointer;
}
.cg{width:802.24px;height: 120px;margin-left: 470px;margin-top: 10px;font-size: 20px;color: #aaa;cursor: pointer;
}
.litle{padding-left: 15px;padding-top: 80px;float: left;cursor: pointer;
}

注：代码中所有xxxx内容均为可自己修改补充的内容。
最后给各位大佬们看看运行效果：

再次重申！！！！本实例所有的loge与图片均来自米哈游–原神，如侵权必删！
最后希望各位大佬有什么问题能多多交流！

前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）相关推荐

前端资源（css,js,图片,接口等）加载过程
查看前端各资源css,js,图片,接口等加载速度前言查看前端各资源加载速度加载过程中各指标详解前言网页打开的速度快慢直接影响了用户体验.据统计,Google网站访问速度每慢400ms就导致用 ...
采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
前端三板斧: HTML+CSS+JS笔记摘自b站狂神说
参考b站狂神说的前端视频,做的笔记视频地址:https://www.bilibili.com/video/BV1x4411V75C HTML 5 什么是HTML? hyper text markup ...
webstorm打开网页_网页前端之HTML+CSS+JS
古柏高枝银杏实,几千年物到而今. 玉纤雪腕白相照,烂银壳破玻璃明. 银杏(学名:Ginkgo biloba),落叶乔木,树冠圆锥形,枝轮生,叶互生,在长枝上散生,二歧状分叉叶脉,果具长梗,下垂,倒卵圆 ...
Web前端：HTML+CSS+JS实现美女照片3D立方体旋转
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
前端与移动开发----JS高级----面向对象编程，类与实例对象，继承，严格模式，模板字符串，class封装tab栏
JS高级01 回顾上阶段 Javascript组成 ECMAScript: 基础语法 (变量, 表达式, 循环, 判断, 函数, 对象等) DOM: document 操作标签(获取, 增加, 插入, ...
【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
文章目录一.内边距复合写法 1.语法 2.代码示例 - 设置 1 个值 3.代码示例 - 设置 2 个值 4.代码示例 - 设置 3 个值 5.代码示例 - 设置 4 个值一.内边距复合写法 1. ...

前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）

前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）

前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）相关推荐

最新文章

热门文章