利用轮播图制作简单游戏页面

 <!-- 顶部连接 --><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>邮箱：bd@egret.com</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);}
});

利用轮播图制作简单游戏页面相关推荐

axure轮播图怎么设置循环轮播_Axure教程：轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
HTML中jquery轮播图旋转,jquery 3d轮播图制作方法 (实现旋转轮播图)
/*轮播*/ .lb_gl{margin-bottom: 30px;background: url(../images/bg_3d.png);background-size: 100% 100%;he ...
新增轮播图跳转web页面、轮播、推荐歌单数据存储（简易音乐七）
新增轮播图跳转web页面.轮播.推荐歌单数据存储( 简易音乐七) 关于效果图第一步,添加引用新增数据库实体类修改fragment代码新增WebActivity页面加载网页关于本篇主 ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
HTML JS正方形轮播,js，html一个页面里面多个页面轮播
这种轮播都是div或者图片的,div能换成iframe显示嵌套网页吗?或者请问有没有其他方法能实现多个页面轮播? 我写了三个iframe frameborder="no" bord ...
js实现轮播图（简单滚动轮播)
原理: 在页面上有一个可视区域(a),用来显示图片,还有一个放所有需要轮播的图片的区域(b) ,当执行操作时 ,b需要移动 ,移动一个a的宽度,使下一张图片显示, 需要实现一下效果: 1.自动播放 2 ...
关于轮播图的简单介绍
一.引入图标字体图标字体(iconfont) 网页中会有很多小的图片,例如,购物车,小箭头,定位等, 这些内容可以直接用图片代替,但图片一般都是比较大的,而且修改起来也不方便所以可以直接使用图标字 ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...

利用轮播图制作简单游戏页面

利用轮播图制作简单游戏页面相关推荐

最新文章

热门文章