minxing-devtools-core
Version:
227 lines (202 loc) • 6.14 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<style>
body, html {
background-color: #E5E5E5;
}
/*banner*/
.swipe {
overflow: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
height: 165px;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.swipe-wrap > div {
overflow: hidden;
position: relative;
}
.swipe-wrap img {
width: 100%;
height: 165px;
max-height: 240px;
min-height: 132px;
min-width: 320px;
max-width: 640px;
}
#slide {
margin: 0 auto;
position: relative;
}
#pointer {
position: absolute;
bottom: 0px;
overflow: hidden;
width: 92%;
text-align: right;
}
#pointer a {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 3px;
margin-right: 4px;
background-color: #9B9B9B;
margin-bottom: 1.5px;
}
#pointer a.active {
width: 6px;
height: 6px;
background-color: #000000;
margin-bottom: 0;
}
.banner-lable {
position: relative;
line-height: 17px;
font-size: 13px;
padding: 5px 10px 0 10px;
}
#btns_box {
width: 100%;
height: 172px;
overflow: hidden;
}
#btns_box .act_btn {
color: #F4B800;
width: 48%;
display: inline-block;
float: left;
text-indent: -1000em;
margin-bottom: 10px;
}
#btns_box .event_2 {
float: right;
margin-bottom: 10px;
}
#btns_box .event_3 {
}
#btns_box .event_4 {
float: right;
}
#btns_box .event_1 {
}
#act_detail_box {
width: 100%;
margin-top: 10px;
}
#act_detail_box .act_detail_btn {
width: 100%;
position: relative;
margin-bottom: 10px;
}
#act_detail_box img {
display: block;
width: 100%;
}
#act_detail_box .statu {
position: absolute;
color: #FFF;
left: 0;
top: 0;
width: 85px;
height: 21px;
text-align: center;
line-height: 21px;
}
#act_detail_box .ing {
background-color: #0084FF;
}
#act_detail_box .end {
background-color: #617488;
}
</style>
</head>
<body>
<div id='slide' class='swipe'>
<div class='swipe-wrap' id="banner-content">
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/4.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/5.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/6.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/7.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/8.png"/>
</div>
<div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
<img src="../image/9.png"/>
</div>
</div>
</div>
<div class="banner-lable">
<span id="banner-title">apicloud重新定义移动应用开发</span>
<div id="pointer">
<a class="active"></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
</div>
</div>
<!-- 敬请期待等 -->
<div id="btns_box">
<img src="../image/1.png" tapmode onclick="" alt="" class="act_btn event_1">
<img src="../image/1.png" tapmode onclick="" alt="" class="act_btn event_2">
<img src="../image/1.png" tapmode onclick="" alt="" class="act_btn event_3">
<img src="../image/1.png" alt="" class="act_btn event_4">
</div>
<!-- 活动详情按钮 -->
<div id="act_detail_box">
<div class="act_detail_btn">
<span class="statu ing">云api</span>
<img src="../image/10.png" alt="111">
</div>
<div class="act_detail_btn">
<span class="statu end">端api</span>
<img src="../image/11.png" alt="111">
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript">
function initSlide() {
var $pointer = $api.byId('pointer');
window.mySlide = Swipe(slide, {
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function (index, element) {
var $actA = $api.dom($pointer, 'a.active');
$api.removeCls($actA, 'active');
$api.addCls($api.eq($pointer, index + 1), 'active');
$api.html($api.byId('banner-title'), $api.attr(element, 'data-value'))
},
transitionEnd: function (index, element) {
}
});
}
initSlide();
</script>
</html>