index 页面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
//引导页面-0
var guide = plus.storage.getItem("guide");
if(guide) {
return;
} else {
mui.openWindow({
url: "guide.html",
id: "guide",
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: 'fade-in', //页面显示动画，默认为”slide-in-right“；
duration: 800 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
}
});
}
});
</script>
</body>
</html>
guide 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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">
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner.jpg);">
</div>
<!-- 第二张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner01.jpg);">
</div>
<!-- 第三张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner02.jpg);">
</div>
<!-- 第四张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner03.jpg);">
<button id='enter' class="mui-btn mui-btn-outlined">立即体验</button>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init();
mui.init();
getPicture();
function getPicture() {
var template='';
var btn='';
var slider = mui("#slider");
var gallery=document.getElementById("slider-group")
mui.ajax('http://127.0.0.1/app/home/index.php?r=advertiese/get-home-ad',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
console.log(JSON.stringify(data));
var ret=data.response;
var result=data.result;
var website='http://10.2.5.76/app/home/';
if (ret==200) {
mui.each(result,function(index,item){
var para=document.createElement("div");
template='<div class="mui-slider-item" style="background-image: url('+website+item.content+');">'
+'</div>';
gallery.innerHTML+=template;
});
btn='<button id="enter" class="mui-btn mui-btn-outlined">'
+"立即体验"
+'</button>';
gallery.innerHTML+=btn;
slider.slider({
interval: 5000
});
enter();
}else{
slider.slider({
interval: 0
});
}
},
error:function(xhr,type,errorThrown){
}
});
}
function enter () {
(function($,doc) {
var enterButton = doc.querySelector('#enter');
enterButton.addEventListener('tap', function(event) {
plus.webview.currentWebview().close();
plus.storage.setItem("guide", plus.runtime.version);
}, false);
$.plusReady(function() {
plus.navigator.closeSplashscreen();
});
}(mui, document));
}
</script>
</body>
</html>
0 个评论
要回复文章请先登录或注册