当前位置：网站首页>利用轮播图制作简单游戏页面
利用轮播图制作简单游戏页面
2022-08-11 05:17:00 【长河落日＃】
<!-- 顶部连接 -->
<div class="head">
<div class="nav-content middle">
<img src="img/下载.png" alt="" id="logo" />
<ul class="middle">
<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>
</ul>
</div>
<!-- 轮播图 -->
<div class="loop middle">
<ul class="loop-pics">
<li><img src="img/banner-1.jpg" alt="" /></li>
<li><img src="img/banner-2.png" alt="" /></li>
<li><img src="img/banner3.png" alt="" /></li>
</ul>
<div id="button-left" title="上一张"><</div>
<div id="button-right" title="下一张">></div>
<!-- 圆点 -->
<div id="indicator"></div>
<!-- 进度条 -->
<div class="pro">
<div class="pro-content">
<span></span>
</div>
</div>
<!-- 底部文字 -->
<div class="loop-text">
<ol>
<li><img src="img/text-1.png" alt="" />白鹭科技优势</li>
<li><img src="img/text-2.png" alt="" />引擎企业服务</li>
<li><img src="img/text-3.png" alt="" />游戏案例精选</li>
<li><img src="img/text-4.png" alt="" />引擎视频教程</li>
</ol>
</div>
</div>
</div>
<!-- warp -->
<div class="clear" style="height: 410px"></div>
<div class="warp middle">
<h2><img src="img/warp-h.png" alt="" />白鹭引擎</h2>
<div class="warp-box">
<h1 style="text-align: center">效率至上的完整开发工作流</h1>
<p class="intro">2D/3D双核心渲染，开发工具链闭环整合，全流程开发，由此开始</p>
<div class="warp-ban middle">
<ul class="warp-ban-pic">
<li><img src="img/warp-ban1.png" alt="" /></li>
<li><img src="img/warp-ban2.png" alt="" /></li>
<li><img src="img/warp-ban3.png" alt="" /></li>
</ul>
<span class="iconfont leftarr"></span>
<span class="iconfont rightarr"></span>
</div>
<p class="intro">一站对接各大平台</p>
<div class="binds">
<img src="img/bind1.png" alt="" />
<img src="img/bind2.png" alt="" />
<img src="img/bind3.png" alt="" />
<img src="img/bind4.png" alt="" />
<img src="img/bind5.png" alt="" />
<img src="img/bind6.png" alt="" />
<img src="img/bind7.png" alt="" />
<img src="img/bind8.png" alt="" />
<img src="img/bind9.png" alt="" />
<img src="img/bind10.png" alt="" />
<img src="img/bind11.png" alt="" />
</div>
</div>
<!-- warp-demo -->
<div class="demo-title">
<h2 style="line-height: 60px"><img src="img/warp-h.png" alt="" />案例推荐</h2>
<span id="more">查看更多</span>
<ul class="demos">
<li>
<img src="img/demo1.png" alt="" />
<h3>全民狙神</h3>
<p>
这是一款3D第一人称射击类微信小游戏。游戏中，玩家需要扮演一个神射手，利用手中武器消灭关卡中的目标，获得丰富奖励.
</p>
</li>
<li>
<img src="img/demo2.jpg" alt="" />
<h3>一起打桌球</h3>
<p>
这是一款3D第一人称射击类微信小游戏。游戏中，玩家需要扮演一个神射手，利用手中武器消灭关卡中的目标，获得丰富奖励.
</p>
</li>
<li>
<img src="img/demo3.png" alt="" />
<h3>迷你世界创造版</h3>
<p>
这是一款3D第一人称射击类微信小游戏。游戏中，玩家需要扮演一个神射手，利用手中武器消灭关卡中的目标，获得丰富奖励.
</p>
</li>
<li>
<img src="img/demo4.jpg" alt="" />
<h3>梦幻西游网页版</h3>
<p>
这是一款3D第一人称射击类微信小游戏。游戏中，玩家需要扮演一个神射手，利用手中武器消灭关卡中的目标，获得丰富奖励.
</p>
</li>
<li>
<img src="img/demo5.png" alt="" />
<h3>开拓幻想篇</h3>
<p>
这是一款3D第一人称射击类微信小游戏。游戏中，玩家需要扮演一个神射手，利用手中武器消灭关卡中的目标，获得丰富奖励.
</p>
</li>
<li>
<img src="img/demo6.png" alt="" />
<h3>枪火工厂</h3>
<p>
这是一款3D第一人称射击类微信小游戏。游戏中，玩家需要扮演一个神射手，利用手中武器消灭关卡中的目标，获得丰富奖励.
</p>
</li>
</ul>
<!-- 新闻动态 -->
<div class="warp-news">
<div class="demo-title">
<h2 style="line-height: 60px"><img src="img/warp-h.png" alt="" />新闻动态</h2>
<span id="more">查看更多</span>
</div>
<ul class="news">
<li>
<img src="img/news1.png" alt="" />
<p>Egret5.3.7发布 改善现有项目的开发体验</p>
</li>
<li>
<img src="img/news2.png" alt="" />
<p>Egret Pro 1.0 重磅发布 ：不仅仅是一款3D编辑器</p>
</li>
<li>
<img src="img/news3.png" alt="" />
<p>5G+云游戏火爆 白鹭科技发力进军云游戏</p>
</li>
</ul>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="shows middle">
<p style="height: 52.6px"></p>
<h2><img src="img/warp-h.png" alt="" />合作伙伴</h2>
<ul>
<li>
<img src="img/fri1.png" alt="" />
<img src="img/fri2.png" alt="" />
<img src="img/fri3.png" alt="" />
<img src="img/fri4.png" alt="" />
<img src="img/fri5.png" alt="" />
<img src="img/fri6.png" alt="" />
</li>
<li>
<img src="img/fri7.png" alt="" />
<img src="img/fri8.png" alt="" />
<img src="img/fri9.png" alt="" />
<img src="img/fri10.png" alt="" />
<img src="img/fri11.png" alt="" />
<img src="img/fri12.png" alt="" />
</li>
<li>
<img src="img/fri13.png" alt="" />
<img src="img/fri14.png" alt="" />
<img src="img/fri15.png" alt="" />
<img src="img/fri16.png" alt="" />
<img src="img/fri17.png" alt="" />
<img src="img/fri18.png" alt="" />
</li>
</ul>
</div>
<div class="root">
<img src="img/root-bg.png" alt="" />
<ul>
<li>关于我们</li>
<li>产品下载</li>
<li>技术支持</li>
<li>加入我们</li>
</ul>
<div class="root-right">
<p>邮箱：[email protected]</p>
<p>官方技术微信号：egretengine</p>
</div>
<p class="copy">
Copyright 2014-2020 egret.com 京网文[2014]0791-191号 京ICP备14025619号-2 京ICP证150115号
京公网安备11010502027089
</p>
</div>
</div>
对应的css样式
* {
margin: 0;
padding: 0;
}
.middle {
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.head {
width: 100%;
background: #001529;
height: 64px;
top: 0px;
}
body {
color: rgba(0, 0, 0, 0.65);
}
.clear {
clear: both;
}
.nav-content {
width: 1160px;
height: 100%;
font-size: 14px;
position: relative;
}
#logo {
position: absolute;
left: 0;
}
.nav-content > ul {
width: 574px;
height: 46px;
display: flex;
}
.nav-content ul li {
font-size: 14px;
line-height: 64px;
text-align: center;
padding: 0px 20px;
}
.nav-content ul li a {
color: #fff;
opacity: 0.6;
}
.nav-content ul li:hover a {
opacity: 1;
}
.loop {
width: 1263px;
height: 315px;
overflow: hidden;
position: relative;
}
.loop-pics {
width: 300%;
display: flex;
position: absolute;
}
.loop-pics li img {
width: 1263px;
height: 315px;
}
#button-left,
#button-right {
position: absolute;
z-index: 2;
color: #fff;
font-size: 30px;
top: 100px;
}
#button-left {
left: 10px;
}
#button-right {
right: 10px;
}
.onclick {
background: #fff !important;
width: 24px !important;
transition: all 0.5s;
}
#indicator {
position: absolute;
bottom: 78px;
left: 50%;
display: flex;
transform: translate(-50%, 0);
}
#indicator div {
width: 16px;
height: 3px;
border-radius: 1px;
background: #cccccc;
margin-right: 5px;
}
.pro {
width: 100%;
height: 10px;
position: absolute;
bottom: 58px;
background: rgba(255, 255, 240, 0.4);
}
.pro-content {
width: 1px;
height: 10px;
background: rgba(0, 191, 255, 0.4);
position: relative;
}
.pro-content span {
position: absolute;
right: 5px;
line-height: 10px;
font-size: 10px;
color: #fff;
}
.loop-text {
width: 100%;
height: 58px;
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.3);
}
.loop-text > ol {
width: 780px;
display: flex;
margin: 0 auto;
}
.loop-text ol li {
width: 194.55px;
height: 58px;
text-align: center;
color: #fff;
cursor: pointer;
line-height: 58px;
border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.loop-text img {
width: 38.22px;
height: 38.22px;
vertical-align: middle;
margin-right: 10px;
}
.loop-text ol li:last-child {
border-right: 1px solid rgba(255, 255, 255, 0.4);
}
/* warp */
.warp-box {
width: 876.22px;
height: 690.7px;
color: #000000;
margin-top: 10px;
background: #f7fafc;
}
.warp {
width: 876.22px;
}
.warp h2 {
font-size: 20px;
font-style: normal;
}
.warp h2 img {
width: 12px;
height: 17px;
vertical-align: middle;
margin-right: 20px;
}
.warp-box h1 {
font-weight: normal;
}
.warp-box .intro {
font-style: normal;
font-size: 16px;
text-align: center;
line-height: 30px;
color: #87888c;
}
.warp-ban {
width: 524px;
height: 397px;
overflow: hidden;
position: relative;
}
.warp-ban ul {
width: 300%;
height: 397px;
display: flex;
position: absolute;
}
.warp-ban ul li img {
width: 524px;
height: 397px;
}
.warp-ban span {
position: absolute;
top: 30%;
font-size: 30px;
color: #ffffff;
cursor: pointer;
}
.rightarr {
right: 10px;
}
.leftarr {
left: 10px;
}
.binds {
width: 100%;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}
.binds img {
width: 76px;
height: 76px;
}
.demo-title {
width: 100%;
height: 30px;
position: relative;
margin-top: 30px;
}
#more {
width: 75px;
height: 24px;
text-align: center;
line-height: 24px;
color: #487af6;
display: inline-block;
position: absolute;
right: 10px;
bottom: -10px;
border: 1px solid #487af6;
border-radius: 10px;
}
.demos {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.demos li {
width: 266px;
border: 1px solid #e8e8e8;
margin-bottom: 50px;
}
.demos li img {
width: 266px;
height: 279px;
}
.demos li h3 {
font-weight: normal;
line-height: 30px;
height: 30px;
}
.demos li p {
font-size: 14px;
line-height: 20px;
}
.warp-news {
width: 100%;
}
.news {
width: 100%;
display: flex;
margin-top: 40px;
justify-content: space-between;
}
.news li {
width: 270.14px;
}
.news li img {
width: 270.14px;
height: 114.02px;
border-radius: 5px;
}
.news li p {
width: 90%;
text-align: center;
line-height: 30px;
}
.footer {
width: 100%;
margin-top: 1200px;
height: 325px;
background: #f7fafc;
}
.footer .shows {
width: 876.22px;
height: 325px;
}
.footer .shows h2 img {
width: 12px;
height: 17px;
vertical-align: middle;
}
.shows h2 {
font-weight: normal;
font-size: 18px;
}
.shows ul li {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.shows ul li img {
width: 130px;
height: 47px;
border-radius: 20px;
box-shadow: 0 0 10px 2px #ececec;
}
.root {
width: 100%;
height: 104px;
position: relative;
}
.root ul {
position: absolute;
z-index: 2;
width: 600px;
height: 16px;
display: flex;
left: 10%;
bottom: 20px;
justify-content: space-between;
}
.root ul li {
color: #fff;
font-size: 14px;
}
.root-right {
width: 380px;
height: 68px;
position: absolute;
right: 5%;
bottom: 0px;
padding-left: 20px;
border-left: 1px solid rgba(255, 255, 240, 0.6);
}
.root-right p {
color: #fff;
font-size: 12px;
line-height: 30px;
}
.copy {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-size: 12px;
border-top: 1px solid #fff;
background-color: #5c6679;
}
利用jq实现轮播功能
$(function () {
/*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
$(".loop").mouseenter(function () {
$("#button-right,#button-left").css({
opacity: 0.5 });
});
$(".loop").mouseleave(function () {
$("#button-right,#button-left").css({
opacity: 0 });
});
var i = 0;
var imgWidth = $(".loop ul li img").width();
console.log(imgWidth);
var clone = $(".loop ul li").first().clone(true);
/*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
$(".loop ul").append(clone);
//get 所有li的个数
var size = $(".loop ul li").length;
//一开始循环添加按钮
//所以添加按钮的时候我们也应该添加4个按钮
for (var j = 0; j < size - 1; j++) {
$("#indicator").append("<div></div>");
}
$("#indicator div").eq(0).addClass("onclick");
/*step 2: */
//左按钮
$("#button-left").click(function () {
toLeft();
});
//右按钮
$("#button-right").click(function () {
toRight();
});
/*step 3：*/
//按钮指示器鼠标移出移入事件
$("#indicator div").hover(
function () {
i = $(this).index();
clearInterval(timer);
$(".loop ul")
.stop()
.animate({
left: -i * imgWidth });
$(this).addClass("onclick").siblings().removeClass("onclick");
},
function () {
timer = setInterval(function () {
toRight();
}, 2000);
}
);
//两个方向按钮鼠标移出移入事件
$("#button-left,#button-right")
.mouseenter(function () {
clearInterval(timer);
})
.mouseleave(function () {
timer = setInterval(function () {
toRight();
}, 2000);
});
//定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
var timer = setInterval(function () {
toRight();
}, 2000);
/*step 2-2*/
//左按钮实现的函数
function toLeft() {
//同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
i--;
if (i == -1) {
$(".loop ul").css({
left: -(size - 1) * imgWidth });
i = size - 2;
}
$(".loop ul").animate({
left: -i * imgWidth }, 1000);
$("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
}
/*step2-2:*/
//右按钮的实现函数
function toRight() {
i++;
/*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片） 并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置 并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
if (i == size) {
console.log("qq");
$(".loop ul").css({
left: 0 });
i = 1;
}
$(".loop ul")
.stop()
.animate({
left: -i * imgWidth }, 1000);
//设置下面指示器的颜色索引
if (i == size - 1) {
$("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");
} else {
$("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
}
//设置进度条
var sumWidth = $(".loop ul").width();
console.log(sumWidth);
let pre = parseFloat((i * imgWidth) / sumWidth).toFixed(2);
console.log(pre);
$(".pro-content span").html(+pre * 100 + "%");
let pre_length = pre * imgWidth;
$(".pro-content").css("width", "" + pre_length + "px");
}
});
$(function () {
/*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
$(".warp-ban").mouseenter(function () {
$(".leftarr,.rightarr").css({
opacity: 1, transform: "translateX(15px)" });
});
$(".loop").mouseleave(function () {
$(".leftarr,.rightarr").css({
opacity: 0.4, transform: translateX(0) });
});
var i = 0;
var imgWidth = $(".warp-ban ul li img").width();
console.log(imgWidth);
var clone = $(".warp-ban ul li").first().clone(true);
/*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
$(".warp-ban ul").append(clone);
//get 所有li的个数
var size = $(".warp-ban ul li").length;
/*step 2: */
//左按钮
$(".leftarr").click(function () {
toLeft();
});
//右按钮
$(".rightarr").click(function () {
toRight();
});
//两个方向按钮鼠标移出移入事件
$(".leftarr,.rightarr")
.mouseenter(function () {
clearInterval(timer);
})
.mouseleave(function () {
timer = setInterval(function () {
toRight();
}, 2000);
});
//定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
var timer = setInterval(function () {
toRight();
}, 2000);
/*step 2-2*/
//左按钮实现的函数
function toLeft() {
//同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
i--;
if (i == -1) {
$(".warp-ban ul").css({
left: -(size - 1) * imgWidth });
i = size - 2;
}
$(".warp-ban ul").animate({
left: -i * imgWidth }, 1000);
}
/*step2-2:*/
//右按钮的实现函数
function toRight() {
i++;
/*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片） 并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置 并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
if (i == size) {
console.log("qq");
$(".warp-ban ul").css({
left: 0 });
i = 1;
}
$(".warp-ban ul")
.stop()
.animate({
left: -i * imgWidth }, 1000);
}
});
边栏推荐
- 【网站小白】Hibernate插入数据成功，不报错，但是数据库中没有值
- Blender 初教程
- C language file operation - detailed explanation of data file type, file judgment, and file buffer
- Who am I ?
- C语言自定义数据类型——联合体
- QT QLabel控件(使用详解)
- Some Error in Visual Studio solution
- 【记录】没用知识点 - 智力题
- Install different versions of MinGW (g++/gcc) and the configuration of the corresponding clion editor under Win
- 吃瓜教程task05 第6章 支持向量机
猜你喜欢
【win10+cuda7.5+cudnn6.0安装caffe①】安装cuda和cudnn
在项目中使用flex布局的justify-content:space-around；遇到的问题，（数量为单数）
【CSDN21天学习挑战赛】第一天，配置环境外加实现mnist手写数字识别
(1) Construction of a real-time performance monitoring platform (Grafana+Influxdb+Jmeter)
吃瓜教程task01 第2章 模型评估与选择
更新啦~人生重开模拟器自制
【win10+cuda7.5+cudnn6.0安装caffe③】编译及测试caffe
RK3399上的Tengine实践笔记
【网站小白】mySQL数据库异常断开
Blender 初教程
随机推荐
【备忘】从零开始搭建Yolo5训练环境
手推卷积神经网络参数（卷积核）求导
内存泄露与内存溢出
第8章 函数探幽-2
LeetCode43. String multiplication (this method can be used to multiply large numbers)
性能效率测试
生成用户的唯一标识（openId），并且加密
08-JS对象、原型及原型链
c指针学习（2）
组件间通信
第10章 对象和类-2
ClionIDE compiles by specifying the compiler
普林斯顿概率论读本读书笔记（阅读中......）
C语言——动态内存分配常见的错误案例
QT GrabWindow截取屏幕
pytorch矩阵运算问题
Flask framework learning: template rendering and Get, Post requests
博客帮助文档
C语言——函数的使用
如何设置pip安装的国内源