实现效果:
方法一使用自定义模版功能实现，代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义模版标签例子</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="html/css/mobile.css" rel="stylesheet" />
<script type="text/javascript" src="html/js/jquery.js"></script>
<script type="text/javascript" src="html/js/mobile.js"></script>
<link rel="stylesheet" href="html/swiper/idangerous.swiper.css">
<link rel="stylesheet" href="html/css/v2_style.css">
<script>
function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;}
var jumpPc = IsPC();
if(jumpPc!=false){document.write('<style>.container{width:320px;}</style>');}
</script>
</head>
<body>
<!--滑动封面页开始-->
<div id="slider" class="swiper-container container" data-role="page">
<div class="swiper-wrapper">
<div class="swiper-slide section1"></div>
<div class="swiper-slide section2"></div>
<div class="swiper-slide section3"></div>
<div class="swiper-slide section4"></div>
<div class="swiper-slide section5">
<div class="bnts"> <a href="#page1" class="btn btn-red">进入阅读</a> <a href="javascript:;" class="btn btn-blue" onClick="show('pop')">点我分享</a> </div>
</div>
</div>
<div class="pagination"></div>
</div>
<!--弹窗-->
<div id="pop" class="pop">
<div class="pop-m">
<div class="clearfix"><a href="javascript:;" onClick="hide('pop')"><img src="html/img/pop.png" class="fr"></a></div>
<h3>点此处分享</h3>
<p>点击右上角<br>
你可以选择告诉好友<br>
或在朋友圈里晒一下~</p>
</div>
</div>
<script type="text/javascript" src="html/js/jquery.js"></script>
<script src="html/swiper/idangerous.swiper.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.container').fadeIn();
var mySwiper = new Swiper('.container', {
paginationClickable: true,
pagination : '.pagination',
slideActiveClass: 'active'
});});
function show(s1){document.getElementById(s1).style.display="block";}
function hide(s1){document.getElementById(s1).style.display="none";}
</script>
<!--滑动封面页结束-->
<div data-role="page" id="page1">
<div data-role="header" data-theme="b"> <a href ="#pl01" data-role="button">菜单</a>
<h1>自定义模版标签例子</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
{list}
<li data-role="list-divider" style="padding:10px;font-size:18px;">{flt}</li>
<li><a href="{liurl}" rel="external">{lit}</a></li>
{/list}
</ul>
</div>
<div data-role="panel" id="pl01">
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入关键字查找...">
{list}
<li><a href="{liurl}" rel="external">{lit}</a></li>
{/list}
</ul>
</div>
<div data-role="footer" data-theme="b">
<h1>版权版有 @ KMAPK</h1>
</div>
</div>
</body>
</html>
方法二：单独写一个html页面在首页通过js读取Cookie判断是否转跳到滑动页面，代码示例：
<script type="text/javascript">
$(document).ready(function() {
var newVisitor = isNewVisitor();// 如果是第一次打开
if(newVisitor === true)
{
window.location.href='start.html';//转跳到滑动页面
// 标记：已经显示过滑动页面，30天之内不再显示
setCookie("gznotes-visited","true", 5);
}
});
function isNewVisitor() {
//从cookie读取标记，判断是否显示过滑动页面
var flg = getCookie("gznotes-visited");
if (flg === "") {
return true;
} else {
return false;
}
}
//将标记写入到cookie字段
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires +";path=/";
}
//读取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
</script>
