很大气漂亮的注册登录页面模板，带背景全屏轮播JS特效，基于jQuery实现，可左右按钮实现背景全屏切换，全屏效果是基于背景图片平铺，插件支持自动切换播放。
<!DOCTYPE html>
<html>
<head>
<title>jquery带全屏背景图片轮播切换的注册登录页面-素材吧</title>
<meta name="keywords" content="jQuery背景全屏轮播,JS背景全屏轮播切换,注册登录页面,注册登录模板页面,注册登录HTML页面,注册登录HTML" />
<meta charset="utf-8">
<link href="css/home.css?v=2" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
<div class="wrap">
<div class="banner-show" id="js_ban_content">
<div class="cell bns-01">
<div class="con"> </div>
</div>
<div class="cell bns-02" style="display:none;">
<div class="con"> <a href="http://www.sucai888.com" target="_blank" class="banner-link"> <i>圈子</i></a> </div>
</div>
<div class="cell bns-03" style="display:none;">
<div class="con"> <a href="http://www.sucai888.com" target="_blank" class="banner-link"> <i>企业云</i></a> </div>
</div>
</div>
<div class="banner-control" id="js_ban_button_box"> <a href="javascript:;" class="left">左</a> <a href="javascript:;" class="right">右</a> </div>
<script type="text/javascript">
;(function(){
var defaultInd = 0;
var list = $(‘#js_ban_content‘).children();
var count = 0;
var change = function(newInd, callback){
if(count) return;
count = 2;
$(list[defaultInd]).fadeOut(400, function(){
count--;
if(count <= 0){
if(start.timer) window.clearTimeout(start.timer);
callback && callback();
}
});
$(list[newInd]).fadeIn(400, function(){
defaultInd = newInd;
count--;
if(count <= 0){
if(start.timer) window.clearTimeout(start.timer);
callback && callback();
}
});
}
var next = function(callback){
var newInd = defaultInd + 1;
if(newInd >= list.length){
newInd = 0;
}
change(newInd, callback);
}
var start = function(){
if(start.timer) window.clearTimeout(start.timer);
start.timer = window.setTimeout(function(){
next(function(){
start();
});
}, 8000);
}
start();
$(‘#js_ban_button_box‘).on(‘click‘, ‘a‘, function(){
var btn = $(this);
if(btn.hasClass(‘right‘)){
//next
next(function(){
start();
});
}
else{
//prev
var newInd = defaultInd - 1;
if(newInd < 0){
newInd = list.length - 1;
}
change(newInd, function(){
start();
});
}
return false;
});
})();
</script>
<div class="container">
<div class="register-box">
<div class="reg-slogan"> 新用户注册</div>
<div class="reg-form" id="js-form-mobile"> <br>
<br>
<div class="cell">
<label for="js-mobile_ipt">填写手机号</label>
<input type="text" name="mobile" id="js-mobile_ipt" class="text" maxlength="11" />
</div>
<div class="cell">
<label for="js-mobile_pwd_ipt">设置密码</label>
<input type="password" name="passwd" id="js-mobile_pwd_ipt" class="text" />
<input type="text" name="passwd" id="js-mobile_pwd_ipt_txt" class="text" maxlength="20" style="display:none;" />
<b class="icon-form ifm-view js-view-pwd" title="查看密码" style="display: none"> 查看密码</b> </div>
<!-- !短信验证码 -->
<div class="cell vcode">
<label for="js-mobile_vcode_ipt">输入验证码</label>
<input type="text" name="code" id="js-mobile_vcode_ipt" class="text" maxlength="6" />
<a href="javascript:;" id="js-get_mobile_vcode" class="button btn-disabled"> 免费获取验证码</a> </div>
<div class="bottom"> <a id="js-mobile_btn" href="javascript:;" class="button btn-green"> 立即注册</a></div>
</div>
<div class="reg-form" id="js-form-mail" style="display: none;">
<div class="cell">
<label for="js-mail_ipt">输入你的常用邮箱</label>
<input type="text" name="email" id="js-mail_ipt" class="text" />
</div>
<div class="cell">
<label for="js-mail_pwd_ipt">设置密码</label>
<input type="password" name="passwd" id="js-mail_pwd_ipt" class="text" />
<input type="text" name="passwd" id="js-mail_pwd_ipt_txt" class="text" maxlength="20" style="display:none;" />
<b class="icon-form ifm-view js-view-pwd" title="查看密码" style="display: none"> 查看密码</b> </div>
<!-- !短信验证码 -->
<div class="cell vcode">
<label for="js-mail_vcode_ipt">输入验证码</label>
<input type="text" name="code" id="js-mail_vcode_ipt" class="text" maxlength="4" />
</div>
<div class="user-agreement">
<input type="checkbox" id="js-mail_chk" checked="true" />
<label for="js-mail_chk">同意<a href="#" target="_blank">《素材吧用户服务协议》</a></label>
</div>
<div class="bottom"> <a id="js-mail_btn" href="javascript:;" class="button btn-green"> 立即注册</a></div>
</div>
</div>
</div>
</div>
<!--以下代码并不是素材部分，请自主删除以下代码-->
<style>
.pull-left{ float:left; display:inline; margin-left:10px; font-size:12px;}
.footjbl{ width:700px; margin:0 auto;position:fixed; bottom:20px; }
</style>
<div class="footjbl">
<ul class="dropdown-menu nav-category" style="padding-top: 10px;">
<li class="pull-left"><a href="http://www.sucai888.com" target="_blank">素材吧:</a></li>
<li class="pull-left"><a href="http://www.sucai888.com/category/tubiaosucai" target="_blank">图标</a></li>
<li class="pull-left"><a href="http://www.sucai888.com/category/texiao" target="_blank">网页特效</a> </li>
<li class="pull-left"><a href="http://www.sucai888.com/category/moban" target="_blank">网页模板</a> </li>
<li class="pull-left"><a href="http://www.sucai888.com/category/psdsucai" target="_blank">PSD素材</a> </li>
<li class="pull-left"><a href="http://www.sucai888.com/category/shiliangsucai" target="_blank">矢量素材</a> </li>
<li class="pull-left"><a href="http://www.sucai888.com/category/html5css3" target="_blank">HTML5</a> </li>
<li class="pull-left"><a href="http://www.sucai888.com/category/zitixiazai" target="_blank">字体下载</a> </li>
<li class="pull-left"><a href="http://www.sucai888.com/category/gaoqingtupiansucai" target="_blank">高清图片</a></li>
<li class="pull-left"><a href="http://www.sucai888.com/category/default" target="_blank">更多分享</a> </li>
<li class="pull-left"><a href="http://www.sucai888.com/pin/lastest" target="_blank">最新素材</a></li>
<li class="pull-left"><a href="http://www.sucai888.com/pin/hot" target="_blank">最热素材</a></li>
</ul>
</div>
</body>
</html>
时间： 2024-08-02 02:47:40