前端搭建（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内容均为可自己修改补充的内容。
最后给各位大佬们看看运行效果：
头部＋轮播