带网上开户表单jQuery焦点图js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是带网上开户表单jQuery焦点图js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带网上开户表单jQuery焦点图</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
<div class="index-banner">
	<div class="head-login">
		<div class="login-right">
			<div class="fan0508-hdnav">
					<ul>
						<li class="on">贵金属投资</li>
						<li class="last-li">石油投资</li>
					</ul>
				</div>
				<div class="fan0508-bdnav">
					<div class="regist-ul" id="reg">
                    <form action="#" method="post" name="" target="_self">
						<ul>
							<li style="display: none;">
								<input class="username" type="" placeholder="姓名">
							</li>
							<li>
								<input class="telinput" type="" placeholder="">
							</li>
							<li>
								<input class="codenput" type="" placeholder=""><code class="get-yz">获取验证码</code> </li>
						</ul>
						<p class="clear"></p>
						<input type="submit" class="openAccount-down" value="马上开户">
                      </form>
					</div>
					<div class="regist-ul" id="SYreg" style="display:none">
                    	<form action="#" method="post" name="" target="_self">
						<ul>
							<li style="display: none;">
								<input class="username" type="" placeholder="姓名">
							</li>
							<li>
								<input class="telinput" type="" placeholder="">
							</li>
							<li>
								<input class="codenput" type="" placeholder=""><code class="get-yz">获取验证码</code> </li>
						</ul>
						<p class="clear"></p>
						<input type="submit" class="openAccount-down" value="马上开户">
                        </form>
					</div>
				</div>
		</div>
	</div>
	<div class="hd">
      <ul class="num">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
  </div>
  <div class="bd">
    <ul class="pic" >
      <li> <a href="#"><img src="images/banner01.jpg" width="1200" height="280" /></a> </li>
      <li> <a href="#"><img src="images/banner02.jpg"  width="1200" height="280" /></a></li>
      <li> <a href="#"><img src="images/banner03.jpg"  width="1200" height="280" /></a></li>
      <li> <a href="#"><img src="images/banner02.jpg"  width="1200" height="280"/></a> </li>
    </ul>
  </div>
  <div class="pnBtn prev"> <span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a> </div>
  <div class="pnBtn next"> <span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a> </div>
</div>
<script type="text/javascript" src="js/jquery-1.72.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="js/HQFn.js"></script>
<script type="text/javascript" src="js/fan.js"></script>
</body>
</html>

JS代码(fan.js):

$(function(){
	var url = document.location.href;
	url = url.split(".")[0];
	url = url.split('//')[1];
	switch(url){
	case "taijiline":case "lsp":case "diagnosis":$('.wrapnav li:eq(1) a').addClass('cur');
	break;
	case "liveroom":$('.wrapnav li:eq(2) a').addClass('cur');
	break;
	case "quote":$('.wrapnav li:eq(3) a').addClass('cur');
	break;
	case "services":$('.wrapnav li:eq(4) a').addClass('cur');
	break;
	case "guide":$('.wrapnav li:eq(5) a').addClass('cur');
	break;
	case "aboutytx":$('.wrapnav li:eq(6) a').addClass('cur');
	break;
	default:$('.wrapnav li:eq(0) a').addClass('cur');
	break;
}
if($('.indexrightsider-ceo').length){
	UTIL.getNewFrag("253",null,"frag_253");
}
$(".goldPrice-tab").slide({
	effect:"left",autoPlay:true,easing:"easeOutCirc"}
);
	//鐩存挱鑰佸笀绠€浠?$(".teacher-list dl").hover(function(){
	$(this).find(".teacher-listinfo").show();
}
,function(){
	$(this).find(".teacher-listinfo").hide();
}
)//鍚戣€佸笀鎻愰棶鍔熻兘/* $(".liveroom-pose ").click(function(){
	$(".p-textwin").show() return false;
}
) $(document).click(function(event){
	if( $(event.target).attr("class") != "inset-top" ){
	$(".p-textwin").hide();
}
}
);
	*/
//棣栭〉banner//$(".index-banner").slide({
	mainCell:".bd ul",effect:"fade",autoPlay:true,delayTime:1000}
);
	$(".index-banner .bd li").first().before( jQuery(".index-banner .bd li").last() );
	$(".index-banner").hover(function(){
	jQuery(this).find(".arrow").stop(true,true).fadeIn(300)}
,function(){
	jQuery(this).find(".arrow").fadeOut(300)}
);
	$(".index-banner").slide({
	titCell:".hd ul",mainCell:".bd ul",effect:"leftLoop",autoPlay:true,vis:3,autoPage:true,trigger:"click"}
);
	//璐甸噾灞炰骇鍝?//$(".data-productTab").slide({
	mainCell:".bd ul",autoPage:true,effect:"leftLoop",vis:6,pnLoop:true}
);
	$(".data-productTab").slide({
	titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",scroll:1,vis:6,pnLoop:false,trigger:"click"}
);
	$(".data-productTab").hover(function(){
	$(".data-productTab .hd").show()}
,function(){
	$(".data-productTab .hd").hide()}
)//棣栭〉搴曢儴ceo}
)//涓嬭浇寮瑰眰$(function(){
	$(".liveroom-down .downlinks span" ).click(function(){
	$('.room-downwin').lightbox_me({
	centered:true}
);
}
);
	$( " .ImmediatelyDownload-downwin").click(function(){
	$('.room-downwin').lightbox_me({
	centered:true}
);
}
);
	//lsp$(".tool-pcMobile").slide({
	mainCell:".bd ul",autoPlay:true}
);
	//鐭俊涓嬪彂 鎻愮ずvar defaultText = '杈撳叆鎵嬫満鍙凤紝鍙戦€佷笅杞介摼鎺ュ埌鎵嬫満'$('#phoneBox').focus(function(){
	if(this.value == defaultText){
	this.value = ''}
}
)$('#phoneBox').blur(function(){
	if(this.value.length == 0){
	this.value = defaultText}
}
)}
)// gotop$(function(){
	$(window).scroll(function(){
	//鍙绐楀彛婊氬姩,灏辫Е鍙戜笅闈唬鐮?var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
	//鑾峰彇婊氬姩鍚庣殑楂樺害if( scrollt >300 ){
	//鍒ゆ柇婊氬姩鍚庨珮搴﹁秴杩?00px,灏辨樉绀?$(".gotop").fadeIn(400);
	//娣″嚭}
else{
	$(".gotop").stop().fadeOut(400);
	//濡傛灉杩斿洖鎴栬€呮病鏈夎秴杩?灏辨贰鍏?蹇呴』鍔犱笂stop()鍋滄涔嬪墠鍔ㄧ敾,鍚﹀垯浼氬嚭鐜伴棯鍔?}
}
);
	$(".gotop").click(function(){
	//褰撶偣鍑绘爣绛剧殑鏃跺€?浣跨敤animate鍦?00姣鐨勬椂闂村唴,婊氬埌椤堕儴$("html,body").animate({
	scrollTop:"0px"}
,200);
}
);
	//20150319headopenbox$(".jygjsbox" ).hover(function(){
	$('.jygjsbox .jytopcompanyopen').stop().slideToggle();
}
);
	$(".jyoilbox" ).hover(function(){
	$('.jyoilbox .jytopcompanyopen').stop().slideToggle();
}
);
}
);
	//piaochuang20150414$(function(){
	$(".jypiaoboxsmall").hover(function(e){
	$('.jypiaoboxsmall').toggleClass("hover");
}
);
	$(".jypiaoboxsmall").click(function(e){
	stopPropagation(e);
	//$('.jypiaoboxsmall').toggleClass("hover");
	//window.open("https://jinshuju.net/f/fDzAiH");
	$(".jypiaoboxbig").fadeIn("slow");
	$(".jypiaoboxsmall").hide("slow");
}
);
	$(".jypiaoboxsmall .openbtn").click(function(e){
	$(".jypiaoboxbig").fadeIn("slow");
	$(".jypiaoboxsmall").hide("slow");
	stopPropagation(e)}
);
	$(".jypiaoboxbig .closebtn,.jypiaoboxbig .closebtntop").click(function(){
	$(".jypiaoboxbig").fadeOut("slow");
	$(".jypiaoboxsmall").show("slow");
}
);
}
)function stopPropagation(e){
	e = e || window.event;
	if(e.stopPropagation){
	//W3C闃绘鍐掓场鏂规硶 e.stopPropagation();
}
else{
	e.cancelBubble = true;
	//IE闃绘鍐掓场鏂规硶}
}

JS代码(HQFn.js):

/*create by yuming 20140121*棣栭〉婊氬姩琛屾儏*/
;
	(function(win,doc){
	var html=[],HQ = function(obj){
	//this.obj = obj ? obj:[['XAGUSD',1],['NI',7],['CU',8],['AL',9],['PD',5],['PT',6]]this.obj = obj ? obj:[['XAGUSD',1,'鐜拌揣鐧介摱'],['NI',7,'鐜拌揣闀?],['CU',8,'鐜拌揣閾?],['AL',9,'鐜拌揣閾?],['PD',5,'鐜拌揣閽噾'],['PT',6,'鐜拌揣閾傞噾'],['mnXAGUSD',1,'鐜拌揣鐧介摱1000'],['mnNI',7,'鐜拌揣闀?00'],['mnCU',8,'鐜拌揣閾?T'],['mnAL',9,'鐜拌揣閾?T'],['mnPD',5,'鐜拌揣閽噾100'],['mnPT',6,'鐜拌揣閾傞噾100'],['dbXAGUSD',1,'鐜拌揣鐧介摱30kg']];
	if(this instanceof HQ){
	this.init.apply(this,arguments)}
else{
	return new HQ(obj)}
}
HQ.prototype ={
	init:function(){
	this.getData()var self = this;
	setInterval(function(){
	self.getData()}
,30000)}
,Url:function(num){
	return 'http://api.baidao.com/api/hq/npdata.do?ids='+num+'&JSONP=?&ran='+ new Date().getTime()}
,getData:function(){
	var url,self=this;
	for(var i = 0;
	i<this.obj.length;
	i++){
	url = self.Url(this.obj[i][1])$.getJSON(url,(function(arg){
	return function(data){
	Html(arg,data)}
}
(i)))}
}
}
win.HQ = HQ}
)(window,document)function Html(ele,data){
	var data = data[0],ptb,name,$ele,pnum,pRose,plus,add;
	$ele = $('.'+this.obj[ele][0]+'');
	pnum = (data.updrop > 0) ? 'p-num':'p-green';
	pRose = (data.updrop > 0) ? 'p-Rose':'p-greenRose';
	add = (data.id == 1) ? '<span class="spantext-bg">80% 閾跺ぉ涓嬫姇璧勮€呴€夋嫨</span>':'';
	ptb = (data.id == 7) ? '12.5鍊嶆潬鏉?:'20鍊嶆潬鏉?;
	plus = (data.updrop > 0) ? '+':'';
	$ele.html('<a href="http://web.98.cn/plus/list.php?tid=260"><p class="p-name">'+ this.obj[ele][2] +'</p><p class="'+pnum+'">'+data.now+'</p><p class="'+pRose+'">'+plus+data.updrop+' <span> '+plus+data.percent+'</span></p><p class="pt-25">'+ptb+'</p>' + add +'</a>');
}
(function($){
	//棣栭〉璧勬簮鏀堕泦//$(".head-login .login-right").slide({
	trigger:"click",titCell:".fan0508-hdnav li",mainCell:".fan0508-bdnav"}
)$('.fan0508-hdnav ul li').click(function(){
	//console.log($(this).index())$(this).siblings().removeClass('on');
	$(this).addClass('on');
	var index = $(this).index();
	//$('.fan0508-bdnav > div').siblings().css('display','none')$('.fan0508-bdnav > div').siblings().css('display','none');
	//var _num = $('.fan0508-bdnav > div').eq(index).fadeOut('display','block');
	$('.fan0508-bdnav > div').eq(index).css('display','block');
	//console.log(_num)}
)regFn({
	id:'reg',notNeedName:true,accuntHref:webAccount.TT}
);
	regFn_SY({
	id:'SYreg',notNeedName:true}
);
	HQ();
	$(".data-productTab").slide({
	mainCell:".bd ul",autoPlay:true,effect:"leftLoop",vis:6,scroll:1,trigger:"click"}
);
	$(".head-login .login-right").slide({
	trigger:"click",titCell:".fan0508-hdnav li",mainCell:".fan0508-bdnav"}
);
}
)(jQuery)

CSS代码(index.css):

.index-banner{width:100%;min-width:1200px;height:280px;position:relative;padding-bottom:6px;background:url(../images/indexhome-5.png) repeat-x center bottom;overflow:hidden;}
.index-banner .bd{width:1200px;position:absolute;left:50%;margin-left:-600px;}
.index-banner .pic{overflow:hidden;height:280px;background-color:#363535;}
.index-banner .pic li{height:280px;width:1200px;overflow:hidden;}
.index-banner .pic li img{display:block;height:280px;width:1200px;}
.index-banner .tempWrap{overflow:visible !important}
.index-banner .tempWrap ul{margin-left:-1200px !important;}
.index-banner .num{bottom:10px;position:absolute;z-index:3;right:50%;margin-right:-50px;}
.index-banner .num li{width:17px;height:13px;position:relative;float:left;margin:0 4px;cursor:pointer;border-bottom:3px solid #d7d7d7;text-indent:-10em;overflow:hidden;}
.index-banner .num .on{border-bottom:3px solid #eb5e01;}
.index-banner .pnBtn{position:absolute;z-index:10;top:0;width:100%;height:280px;cursor:pointer;}
.index-banner .prev{left:-50%;margin-left:-600px;}
.index-banner .next{left:50%;margin-left:600px;}
.index-banner .pnBtn .blackBg{display:block;position:absolute;left:0;top:0;width:100%;height:280px;background:#000;filter:alpha(opacity=50);opacity:0.5;}
.index-banner .pnBtn .arrow:hover{filter:alpha(opacity=60);opacity:0.6;}
.index-banner .prev .arrow{display:none;position:absolute;background:url(../images/indexhome-8.png) no-repeat 0 0;width:35px;height:71px;top:115px;z-index:10;right:10px;}
.index-banner .next .arrow{display:none;position:absolute;background:url(../images/indexhome-8.png) no-repeat -45px 0;width:35px;height:71px;top:115px;z-index:10;left:10px;}
.head-login{width:1200px;margin:0 auto;position:relative;z-index:10;}
.head-login .login-right{float:right;width:300px;background:url(../images/indexhome-4.png);height:280px;top:0;position:absolute;right:0;}
.head-login .login-right .p-line{width:45px;height:3px;background:#c29318;font-size:0;line-height:1;}
.head-login .login-right .ptext{color:#fff;font-size:20px;padding-top:6px;}
/* 0130 start */
.head-login .login-right .ptext a{color:#fff;}
/* 0130end */
.head-login .login-right .regist-ul{margin:15px 0 0 0;}
.head-login .login-right .regist-ul li{margin-bottom:20px;overflow:hidden;}
.head-login .login-right .regist-ul li .telinput{width:198px;padding:0px 5px;height:43px;line-height:43px;border:1px solid #464646;background:url(../images/indexhome-7.png) no-repeat;color:#a8a7a7;font-size:14px;padding-left:50px;font-family:Microsoft YaHei,SimHei,Arial,Helvetica,sans-serif;}
.head-login .login-right .regist-ul li .codenput{width:123px;padding:0px 5px;height:43px;line-height:43px;border:1px solid #464646;background:url(../images/indexhome-7.png) no-repeat 0 -47px;color:#a8a7a7;font-size:14px;text-indent:45px;float:left;font-family:Microsoft YaHei,SimHei,Arial,Helvetica,sans-serif;}
.head-login .login-right .regist-ul li .get-yz{background:#555;border:1px solid #646262;height:43px;display:inline-block;float:left;width:108px;margin-left:10px;font-size:12px;color:#a8a7a7;text-align:center;line-height:40px;cursor:pointer;}
.head-login .login-right .regist-ul .openAccount-down{background:#ff6d00;text-align:center;color:#fff;height:50px;line-height:50px;border:0;cursor:pointer;width:255px;font-family:microsoft yahei;font-size:20px;}
.fan0508-hdnav{overflow:hidden;}
.fan0508-hdnav li{height:52px;text-align:center;border-bottom:1px solid #464646;float:left;width:149px;border-right:1px solid #464646;color:#fff;font-size:18px;line-height:52px;padding-bottom:4px;cursor:pointer;}
.fan0508-hdnav .last-li{border-right:0;}
.fan0508-hdnav .on{border-bottom:4px solid #ff6d00;color:#FF6D00;padding-bottom:0;}
.fan0508-bdnav{padding:15px 0 0 25px;}

CSS代码(style.css):

ul,li{list-style:none outside none;margin:0;padding:0}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,ol,ul,li,img,input{margin:0;padding:0;border:0}
img{vertical-align:middle}
.clear{clear:both;margin:0;padding:0}
.clearFix:after{clear:both;content:".";display:block;height:0;visibility:hidden}
.clearFix{*display:inline-block;}
textarea{resize:none}
a{text-decoration:none;color:#222}
a:hover{text-decoration:none;color:#ff6d00}
body{font-size:14px;color:#222;padding:0;margin:0;background:#eee url(../images/analysisTool-body.jpg);line-height:1.6;font-family:"microsoft yahei",Helvetica,Arial,sans-serif;min-width:1200px;font-family:Microsoft YaHei,SimHei,Helvetica,Arial,sans-serif}

附件:下载该文件资源,减少时间成本(增值服务)