极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--禁止缩放-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>tab拨动</title>
<link rel="stylesheet" type="text/css" href="css/dome.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery.1.9.1.min.js" type="text/javascript" ></script>
<link rel="stylesheet" href="css/swiper.css">
<script src="js/swiper.js" type="text/javascript" ></script>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ontouchstart>
<div class="swiper-container">
<div class="my-pagination">
<div class="swiper-container-top">
<div class="swiper-wrapper">
<ul class="my-pagination-ul"></ul>
</div>
</div>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<!--手机绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-tablet" style="font-size:18px;"></em><input type="tel" placeholder="请输入手机号"></p>
</li>
<li>
<p class="p_input p_input_yzm"><em class="fa fa-envelope" style="font-size:14px;"></em><input type="text" placeholder="请输入验证码"><span class="sp_btn">获取验证码</span></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--手机绑定END-->
</div>
<div class="swiper-slide">
<!--固话绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-user" style=""></em><input type="text" placeholder="客户号 / 开户人姓名"></p>
</li>
<li>
<p class="p_input "><em class="fa fa-lock"></em><input type="text" placeholder="服务密码 / 开户人身份证号"></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--固话绑定END-->
</div>
<div class="swiper-slide">
<!--固话绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-user" style=""></em><input type="text" placeholder="客户号 / 开户人姓名"></p>
</li>
<li>
<p class="p_input "><em class="fa fa-lock"></em><input type="text" placeholder="服务密码 / 开户人身份证号"></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--固话绑定END-->
</div>
<div class="swiper-slide">
<!--固话绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-user" style=""></em><input type="text" placeholder="客户号 / 开户人姓名"></p>
</li>
<li>
<p class="p_input "><em class="fa fa-lock"></em><input type="text" placeholder="服务密码 / 开户人身份证号"></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--固话绑定END-->
</div>
<div class="swiper-slide">
<!--手机绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-tablet" style="font-size:18px;"></em><input type="tel" placeholder="请输入手机号"></p>
</li>
<li>
<p class="p_input p_input_yzm"><em class="fa fa-envelope" style="font-size:14px;"></em><input type="text" placeholder="请输入验证码"><span class="sp_btn">获取验证码</span></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--手机绑定END-->
</div>
<div class="swiper-slide">
<!--固话绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-user" style=""></em><input type="text" placeholder="客户号 / 开户人姓名"></p>
</li>
<li>
<p class="p_input "><em class="fa fa-lock"></em><input type="text" placeholder="服务密码 / 开户人身份证号"></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--固话绑定END-->
</div>
<div class="swiper-slide">
<!--固话绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-user" style=""></em><input type="text" placeholder="客户号 / 开户人姓名"></p>
</li>
<li>
<p class="p_input "><em class="fa fa-lock"></em><input type="text" placeholder="服务密码 / 开户人身份证号"></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--固话绑定END-->
</div>
<div class="swiper-slide">
<!--手机绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-tablet" style="font-size:18px;"></em><input type="tel" placeholder="请输入手机号"></p>
</li>
<li>
<p class="p_input p_input_yzm"><em class="fa fa-envelope" style="font-size:14px;"></em><input type="text" placeholder="请输入验证码"><span class="sp_btn">获取验证码</span></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--手机绑定END-->
</div>
<div class="swiper-slide">
<!--固话绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-user" style=""></em><input type="text" placeholder="客户号 / 开户人姓名"></p>
</li>
<li>
<p class="p_input "><em class="fa fa-lock"></em><input type="text" placeholder="服务密码 / 开户人身份证号"></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--固话绑定END-->
</div>
<div class="swiper-slide">
<!--固话绑定GO-->
<div class="user_zc_body">
<ul>
<li>
<p class="p_input"><em class="fa fa-user" style=""></em><input type="text" placeholder="客户号 / 开户人姓名"></p>
</li>
<li>
<p class="p_input "><em class="fa fa-lock"></em><input type="text" placeholder="服务密码 / 开户人身份证号"></p>
</li>
</ul>
</div>
<div class="user_zc_btn">
<p class="p_btn">
<a href="#" class="c_4">立即绑定</a>
</p>
</div>
<!--固话绑定END-->
</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container-top', {
scrollbarHide: true,
slidesPerView: 'auto',
grabCursor: true,
freeMode: true,
updateTranslate: true,
setWrapperSize: true,
observer: true,
observeParents: true
});
var mySwiper = new Swiper('.swiper-container', {
pagination: '.my-pagination-ul',
paginationClickable: true,
paginationBulletRender: function(index, className) {
switch(index) {
case 0:
name = '全部';
break;
case 1:
name = '口味';
break;
case 2:
name = '场景';
break;
case 3:
name = '礼品';
break;
case 4:
name = '下午茶';
break;
case 5:
name = '任然';
break;
case 6:
name = '婆娑';
break;
case 7:
name = '创意';
break;
case 8:
name = '鲜花';
break;
case 9:
name = '阁楼';
break;
default:
name = '';
}
return '<li class="' + className + '">' + name + '</li>';
}
})
</script>
</body>
</html>
html5