前端搭建（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"><</span><span id="right">></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与图片均来自米哈游–原神，如侵权必删！ 最后希望各位大佬有什么问题能多多交流！
