以下是 jquery带登录注册幻灯片代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jquery带登录注册幻灯片代码</title>
<meta charset="gb2312">
<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="#" class="banner-link">
<i>圈子</i></a> </div>
</div>
<div class="cell bns-03" style="display:none;">
<div class="con">
<a href="#" 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" />
<img id="js-mail_vcode_img" src="http://passport.115.com/?ct=securimage&ac=email" alt="code" />
<span>
<a id="js-mail_vcode_a" href="javascript:;" code_src="http://passport.115.com/?ct=securimage&ac=email">
换一张</a></span> </div>
<div class="user-agreement">
<input type="checkbox" id="js-mail_chk" checked="true" />
<label for="js-mail_chk">同意<a href="http://115.com/agreement.html" target="_blank">《115网盘用户服务协议》</a></label>
</div>
<div class="bottom">
<a id="js-mail_btn" href="javascript:;" class="button btn-green">
立即注册</a></div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="con">
<div class="copy-right">
<div class="cell">
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码(home.css):
body{margin:0;font:12px/1.8 Tahoma,Geneva,'\5B8B\4F53';color:#333;background:white;}
input,textarea,select{margin:0;padding:0;font-size:12px;outline:none;resize:none;}
html:root body,html:root input,html:root button,html:root textarea,html:root select{font-family:Tahoma,Geneva,'\5fae\8f6f\96c5\9ed1','\5B8B\4F53';}
form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,p{margin:0;padding:0;list-style:none;}
a{text-decoration:none;color:#224892;outline:none;}
a:hover{text-decoration:underline;}
a img{border:none;}
i,em{font-style:normal;}
b{color:#F63;}
button{cursor:pointer;}
button i{display:none;}
.text,textarea{font-size:14px;font-weight:bold;color:#333;border:1px solid;border-color:#CECECF;border-radius:0;background:white;box-shadow:inset 1px 1px 2px rgba(0,0,0,0.1);-webkit-appearance:none;}
.text:focus,textarea:focus{outline:none;border-color:#92AFED;box-shadow:0 0 5px #92AFEC,inset 1px 1px 2px rgba(0,0,0,0.1);}
.text{width:170px;height:24px;padding:7px 9px;line-height:24px;}
input.err,input.err:focus{color:#900;border-color:#E06341;background:#FFEFEC;box-shadow:0 0 5px #E06341;}
textarea{width:270px;height:100px;padding:5px 9px;line-height:1.7;font-size:14px;overflow:auto;resize:none;}
.button{display:inline-block;height:40px;padding:0 15px;line-height:40px;text-align:center;font-size:18px;font-family:'Heiti SC','\5fae\8f6f\96c5\9ed1','\9ed1\4f53';color:white;border:0 none;background-color:#167efb;background-repeat:repeat-x;background-position:0 0;cursor:pointer;}
.button:hover{text-decoration:none;background-color:#1672e3;}
.button:active{background-color:#3482e1;}
.button .icon{position:relative;top:11px;vertical-align:top;font-weight:normal;}
.button span{position:relative;top:11px;display:inline-block;height:16px;line-height:16px;vertical-align:top;padding-left:8px;}
.button em{display:none;}
.btn-gray{color:#666;background-color:#eee;}
.btn-gray:hover{background-color:#ddd;}
.btn-gray:active{background-color:#e7e7e7;}
.btn-green{height:50px;line-height:50px;background-color:#9ed04d;}
.btn-green:hover{background-color:#76bf48;}
.btn-green:active{background-color:#51b73d;}
.btn-disabled,.btn-disabled:hover,.btn-disabled:active{background-color:#e7e7e7;color:#A1A1A1;cursor:not-allowed;}
button.button{height:40px;padding:0 10px;line-height:normal;}
.top-login .bottom .qcode-switch s,.quick-login dt{background-image:url(../images/icon_login_top.gif?v=201406241538);background-repeat:no-repeat;}
.icon-form{position:absolute;z-index:3;width:18px;height:18px;line-height:10;overflow:hidden;background-image:url(../images/icon_form.gif?v=201406241538);background-repeat:no-repeat;cursor:pointer;}
.ifm-war{z-index:4;background-position:0 0;}
.ifm-view{background-position:0 -18px;}
.ifm-secure{background-position:0 -36px;}
.login-popup-hint,.login-popup-hint i{background-image:url(../images/popup_hint.png?v=201406241538);background-repeat:no-repeat;_background-image:url(../images/popup_hint.gif?v=201406241538);}
.login-popup-hint{position:absolute;top:-35px;right:0;z-index:4;height:35px;padding-right:10px;line-height:30px;white-space:nowrap;font-size:12px;color:#FFF;background-position:right 0;}
.login-popup-hint i{position:absolute;top:0;left:-10px;width:10px;height:30px;overflow:hidden;background-position:0 0;}
.header{position:relative;z-index:3;min-width:980px;height:80px;}
.header .con{position:relative;width:980px;height:80px;margin:auto;}
h1.logo{position:absolute;top:20px;left:0;width:183px;height:39px;line-height:20;overflow:hidden;font-size:12px;background:url(../images/logo.gif?v=201406241538) no-repeat 0 0;}
.top-login{position:absolute;top:13px;right:0;zoom:1;}
.top-login .cell{position:relative;z-index:1;float:left;width:162px;height:32px;}
.top-login .cell label{position:absolute;top:0;left:0;z-index:1;padding:0 10px;line-height:32px;font-size:12px;color:#999;cursor:text;}
.top-login .cell .text{float:left;width:132px;height:16px;padding:7px 9px;line-height:16px;font-size:14px;font-weight:bold;}
.top-login button.button{float:left;width:76px;height:32px;padding:0;font-size:16px;*line-height:28px;_line-height:30px;background-position:0 -8px;}
.top-login button.button:hover{background-position:0 -48px;}
.top-login button.button:active{background-position:0 -88px;}
.top-login button.btn-gray{background-position:0 -128px;}
.top-login button.btn-gray:hover{background-position:0 -168px;}
.top-login button.btn-gray:active{background-position:0 -208px;}
.top-login .bottom{position:absolute;top:40px;left:0;width:400px;height:16px;line-height:16px;font-size:12px;color:#6b7284;}
.top-login .bottom a{color:#6b7284;}
.top-login .bottom .qcode-switch{float:left;height:16px;margin-right:81px;}
.top-login .bottom .qcode-switch s{float:left;width:16px;height:16px;margin-right:5px;overflow:hidden;background-position:0 0;}
.top-login .bottom .qcode-switch:hover{text-decoration:none;}
.top-login .bottom input{position:relative;top:1px;float:left;width:14px;height:14px;margin-right:4px;}
.top-login .bottom label{position:relative;top:1px;float:left;height:14px;line-height:14px;margin-right:10px;padding-right:10px;border-right:1px solid #6b7284;}
.top-login .icon-form{top:7px;right:15px;}
.top-login .login-popup-hint,.top-login .login-popup-hint i{background-image:url(../images/popup_hint_bottom.png?v=201406241538);_background-image:url(../images/popup_hint_bottom.gif?v=201406241538);}
.top-login .login-popup-hint{top:26px;right:4px;height:30px;padding-top:5px;}
.top-login .login-popup-hint i{top:5px;background-position:0 -5px;}
.quick-login{position:absolute;right:0;top:40px;}
.quick-login dt{position:absolute;top:0;right:1px;width:74px;height:16px;line-height:10;overflow:hidden;background-position:-18px 0;cursor:pointer;}
.quick-login dd{position:absolute;top:-8px;right:-4px;width:260px;border:1px solid #4B628B;border-radius:3px;background:#F9FAFF;box-shadow:0 2px 5px rgba(0,0,0,0.2);z-index:4;}
.quick-login dd s{position:absolute;top:6px;right:5px;width:0;height:0;overflow:hidden;border:6px solid;border-color:transparent transparent #1C3E7B;_border-color:pink pink #1C3E7B;_filter:chroma(color=pink);}
.quick-login h3{height:30px;padding:0 10px;line-height:30px;font-size:12px;font-weight:normal;color:#666;cursor:pointer;}
.quick-login ul{padding:2px 0 0 10px;overflow:hidden;zoom:1;}
.quick-login li{float:left;width:115px;padding:0 10px 10px 0;}
.quick-login li a{position:relative;display:block;height:28px;padding-left:30px;line-height:28px;color:#666;border:1px solid #AFB7C8;border-radius:3px;background:white;cursor:pointer;}
.quick-login li a:hover{text-decoration:none;border-color:#909DB7;background:#F7F9FF;background:-webkit-linear-gradient(top,#F7F9FF,#E5E9F8);background:-moz-linear-gradient(top,#F7F9FF,#E5E9F8);background:-ms-linear-gradient(top,#F7F9FF,#E5E9F8);background:linear-gradient(top,#F7F9FF,#E5E9F8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF7F9FF',endColorstr='#FFE5E9F8');}
.quick-login li .ico-acc{position:absolute;top:6px;left:8px;width:16px;height:16px;overflow:hidden;background-image:url(../images/icon_access.gif?v=201406241538);background-repeat:no-repeat;}
.acc-qq{background-position:0 0;}
.acc-sina{background-position:-16px 0;}
.acc-tencent{background-position:-32px 0;}
.acc-renren{background-position:-48px 0;}
.acc-neteasy{background-position:-64px 0;}
.acc-douban{background-position:-80px 0;}
.acc-baidu{background-position:-96px 0;}
.acc-surfing{background-position:-112px 0;}
.acc-alipay{background-position:-128px 0;}
.wrap{position:relative;z-index:0;height:600px;}
.banner-show{position:absolute;top:0;left:0;z-index:0;width:100%;min-width:980px;height:600px;overflow:hidden;}
.banner-show .cell{position:absolute;top:0;left:0;width:100%;overflow:hidden;background-repeat:repeat-x;background-position:center top;}
.banner-show .cell .con{position:relative;height:600px;background-repeat:no-repeat;background-position:center top;}
.bns-01{background-image:url(../images/mid_banner/banner_01_repeat.png?v=201406241538);}
.bns-01 .con{background-image:url(../images/mid_banner/banner_01.png?v=201406241538);}
.bns-02{background-image:url(../images/mid_banner/banner_02_repeat.gif?v=201406241538);}
.bns-02 .con{background-image:url(../images/mid_banner/banner_02.gif?v=201406241538);}
.bns-03{background-image:url(../images/mid_banner/banner_03_repeat.png?v=201406241538);}
.bns-03 .con{background-image:url(../images/mid_banner/banner_03.png?v=201406241538);}
.banner-link{position:absolute;top:100px;left:50%;width:400px;height:400px;margin-left:-430px;}
.banner-link i{display:none;}
.banner-control{position:absolute;top:0;left:50%;width:980px;margin-left:-490px;}
.banner-control a{position:absolute;top:258px;width:30px;height:30px;line-height:10;overflow:hidden;background-image:url(../images/icon_control.png?v=201406241538);background-repeat:no-repeat;background-repeat:no-repeat;}
.banner-control a.left{left:-55px;background-position:0 0;}
.banner-control a.left:hover{background-position:0 -30px;}
.banner-control a.right{right:-55px;background-position:-30px 0;}
.banner-control a.right:hover{background-position:-30px -30px;}
.container{position:relative;top:600px;z-index:2;width:980px;height:0;margin:auto;}
.storage-info{display:none;position:absolute;top:0;width:980px;height:30px;padding:20px 0;text-align:right;overflow:hidden;}
.storage-info span{position:relative;display:inline-block;height:30px;margin:0 0 0 40px;padding-left:48px;line-height:30px;zoom:1;font-size:18px;color:white;}
.storage-info i{position:absolute;top:0;left:0;width:36px;height:30px;overflow:hidden;background-image:url(../images/icon_storage.gif?v=201406241538);background-repeat:no-repeat;}
.ist-user{background-position:0 0;}
.ist-storage{background-position:-36px 0;}
.ist-file{background-position:-72px 0;}
.register-box{position:absolute;top:-550px;right:0;width:396px;height:476px;background:white;border-radius:3px;background:rgba(255,255,255,0.95);}
.reg-tab{position:relative;width:396px;height:57px;zoom:1;overflow:hidden;border-radius:3px 3px 0 0;}
.reg-tab span{float:left;width:198px;height:57px;margin-left:-1px;line-height:57px;text-align:center;font-size:24px;color:#444;border-left:1px solid #d2d3d4;background:url(../images/bg_tab_x.png?v=201406241538) repeat-x 0 0;cursor:pointer;}
.reg-tab span:first-child{border-top-left-radius:3px;}
.reg-tab span:last-child{border-top-right-radius:3px;}
.reg-tab span.current{background:none;cursor:default;}
.reg-slogan{height:50px;line-height:50px;text-align:center;font-size:16px;}
.reg-form{width:328px;height:280px;margin:auto;}
.reg-form .cell{position:relative;height:40px;margin-bottom:22px;zoom:1;}
.reg-form .cell label{position:absolute;top:0;left:0;z-index:1;padding:0 12px;line-height:40px;font-size:16px;color:#999;font-weight:bold;cursor:text;}
.reg-form .cell input{position:absolute;top:0;left:0;width:304px;padding:7px 11px;font-size:16px;background:none;}
.reg-form .cell .icon-form{top:11px;right:10px;}
.reg-form .vcode input{width:110px;}
.reg-form .vcode .button{position:absolute;top:0;left:144px;width:182px;padding:0;font-size:14px;}
.reg-form .vcode img{position:absolute;top:0;left:144px;width:110px;height:40px;}
.reg-form .vcode span{position:absolute;top:0;left:264px;line-height:40px;font-size:14px;}
.reg-form .vcode .icon-form{right:204px;}
.reg-form .vcode .login-popup-hint{right:194px;}
.reg-form .user-agreement{height:16px;margin-top:-22px;padding:18px 0;line-height:16px;}
.reg-form .user-agreement input{float:left;width:14px;height:14px;margin:1px 5px 0 0;}
.reg-form .bottom{height:40px;}
.reg-form .bottom .button{display:block;border-radius:3px;}
.client-download{position:absolute;bottom:0;left:0;width:100%;height:86px;text-align:center;border-radius:0 0 3px 3px;background:#f6f3f0;}
.client-download a{position:relative;top:13px;display:inline-block;width:64px;margin:0 10px;color:#999;}
.client-download a i{display:block;width:32px;height:32px;margin:0 auto 4px;overflow:hidden;background-image:url(../images/icon_client.gif?v=201406241538);background-repeat:no-repeat;opacity:0.5;filter:alpha(opacity=50);}
.client-download a span{display:block;line-height:24px;text-align:center;font-size:14px;}
.client-download a:hover{text-decoration:none;color:#666;}
.client-download a:hover i{opacity:1;filter:alpha(opacity=100);}
.icd-cloud{background-position:-0px 0;}
.icd-iphone{background-position:-32px 0;}
.icd-ipad{background-position:-64px 0;}
.icd-android{background-position:-96px 0;}
.footer{padding:25px 0;}
.copy-right{width:980px;margin:auto;text-align:center;color:#999;}
.copy-right .cell{position:relative;height:26px;line-height:26px;}
.copy-right a{color:#999;}
.copy-right a:hover{color:#333;}
.localization-box{display:inline-block;padding:4px 0;vertical-align:top;*display:inline;*zoom:1;*vertical-align:middle;}
.localization-box li{position:relative;float:left;height:18px;margin-left:15px;padding-left:20px;line-height:19px;vertical-align:top;overflow:hidden;_display:inline;}
.localization-box .ico-local{position:absolute;top:4px;left:0;width:16px;height:11px;overflow:hidden;background-image:url(../images/icon_localization.gif?v=201406241538);background-repeat:no-repeat;}
.iclo-cn{background-position:0 0;}
.iclo-tw{background-position:0 -12px;}
.iclo-us{background-position:0 -24px;}
.qcode-login{position:absolute;top:0;left:0;z-index:11;width:100%;height:600px;background:#333945;}
.qcode-login .con{position:relative;width:980px;margin:auto;}
.qcode-login .close{position:absolute;top:20px;right:0px;width:48px;height:48px;line-height:20;overflow:hidden;background:url(../images/close_qcode.gif?v=201406241538) no-repeat 0 0;}
.qcode-login .close:hover{background-position:0 -48px;}
.qcode-flag{display:none;position:absolute;top:15px;left:67px;width:836px;height:77px;overflow:hidden;background:url(../images/flag_qcode.gif?v=201406241538) no-repeat 0 0;}
.qcode-pic{position:absolute;top:92px;left:640px;z-index:1;width:295px;height:415px;background:url(../images/pic_qcode.png?v=201406241538) no-repeat right top;opacity:0;filter:alpha(opacity=0);-webkit-transform:translate(-315px,0) scale(0.3);-moz-transform:translate(-315px,0) scale(0.3);-ms-transform:translate(-315px,0) scale(0.3);-webkit-transform-origin:50% 40%;-moz-transform-origin:50% 40%;-ms-transform-origin:50% 40%;-webkit-transition:all 0.5s ease 0.25s;-moz-transition:all 0.5s ease 0.25s;-ms-transition:all 0.5s ease 0.25s;}
.qcode-show:hover .qcode-pic{opacity:1;filter:alpha(opacity=100);-webkit-transform:translate(0,0) scale(1);-moz-transform:translate(0,0) scale(1);-ms-transform:translate(0,0) scale(1);}
.qcode-box{position:absolute;top:118px;left:50%;width:300px;height:300px;margin-left:-150px;background:white;box-shadow:0 0 10px rgba(0,0,0,0.5);}
.qcode-box img{width:300px;height:300px;}
.qcode-download{position:absolute;top:418px;left:50%;width:300px;margin-left:-150px;padding-top:20px;}
.qcode-download a{display:block;height:24px;padding:13px;line-height:24px;text-align:center;font-size:18px;overflow:hidden;color:#91969e;background:#434954;}
.qcode-download a:before{content:"";display:inline-block;width:16px;height:24px;margin:-6px 10px 0 0;vertical-align:middle;background:url(../images/icon_client_download.png) no-repeat 0 0;}
.qcode-download a:hover{text-decoration:none;color:white;background:#5c616a;}
.qcode-download a:hover:before{background-position:-16px 0;}
.qcode-desc-text{position:absolute;top:565px;left:0;width:100%;line-height:24px;text-align:center;color:#686f7c;}
.qcode-hint{position:absolute;top:436px;left:50%;width:278px;margin-left:-150px;padding:10px;line-height:30px;text-align:center;font-size:16px;color:white;border:1px solid #006700;background:#64b832;}
.qcode-hint .arrow{position:absolute;top:-17px;left:50%;width:0;height:0;margin-left:-8px;overflow:hidden;border:8px solid;border-color:transparent transparent #006700;_border-color:pink pink #006700;_filter:chroma(color=pink);}
.qcode-hint s.arrow{top:-16px;border-bottom-color:#64b832;}
分享到QQ
分享到微博
微信扫一扫
