mui 开发app 开机画面 有那种 3~5张图轮播 最后点击 立即体验··再进入app 怎么实现
- 发布:2015-05-31 13:59
- 更新:2015-06-01 15:42
- 阅读:2255
mui 开发app 开机画面 有那种 3~5张图轮播 最后点击 立即体验··再进入app 怎么实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
.mui-slider-item, .mui-slider-item a {
width: 100%;
height: 100%;
}
.mui-slider-item a img{
width: 100%;
min-height: 100%;
}
#enter {
position: absolute;
width: 160px;
left: 50%;
margin-left: -80px;
bottom: 15%;
padding: 10px;
}
</style>
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/guide-1.png">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/guide-2.png">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/guide-3.png">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/guide-4.png">
<button id='enter' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
(function($, doc) {
$.init();
var enterButton = doc.querySelector('#enter');
enterButton.addEventListener('tap', function(event) {
$.back();
}, false);
}(mui, document));
</script>
</body>
</html>
天和日远 (作者)
谢谢楼上的分享 不过这只是一个轮播啊··· 我主要的想问的 如何把这轮播 插到 软件启动后的画面中 。。。 现在启动是单张图片, 如何把单张图片换成轮播呢 点击体检按钮可以再进入首页
天和日远 (作者)
我知道 可以先打开一个页面 ,但是 所有的判断都是在 主入口文件中去写 这样不是会有切屏的效果。。。 就是启动 加载画面 然后 进 主页面 再跳去欢迎页 再跳回来··· 效果太差了··· 我的意思有没有 直接替换 启动加载那个页面 , 就是 启动 直接就是欢迎轮播 加载完 点击立即体验 就直接进入主入口文件! 不知道可以实现不?
还有就是 追加一个问题 app软件 关闭后在启动 如何判断呢 ,如果是给storage 写一个参数的, 那么在关闭软件的时候 (不是退出)的情况选 如何清空 这个storage中的值呢 ? 还是说mui有 和 切屏一样的(resume) 监 听 呢 ?
小和尚ABC
怎么在index加载guide.html的?
2016-04-15 11:40