很大氣漂亮的注冊登錄頁面模板，帶背景全屏輪播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>