标签：style blog http io ar color os sp java
很大气漂亮的注册登录页面模板，带背景全屏轮播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>
标签：style blog http io ar color os sp java
原文地址：http://www.cnblogs.com/sucai888/p/4127045.html
