挺多网站都用到的jquery带用户登录注册表单的宽屏幻灯片js代码效果,banner横幅图片以背景的形式展示,这个是只有用户注册表单的效果,有需要的可自行添加用户登录表单,做个tab切换即可!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery带用户注册表单的宽屏幻灯片代码</title>
<link href="css/style.css" 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="#" target="_blank" class="banner-link">
<i>圈子</i></a> </div>
</div>
<div class="cell bns-03" style="display:none;">
<div class="con">
<a href="#" 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>
<script type="text/javascript">
var FancyForm=function(){
return{
inputs:".reg-form input",
setup:function(){
var a=this;
this.inputs=$(this.inputs);
a.inputs.each(function(){
var c=$(this);
a.checkVal(c)
});
a.inputs.live("keyup blur",function(){
var c=$(this);
a.checkVal(c);
});
},checkVal:function(a){
a.val().length>0?a.parent("div").addClass("val"):a.parent("div").removeClass("val")
}
}
}();
</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>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
FancyForm.setup();
});
</script>
</body>
</html>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791