dengzhiguo 7 years ago
parent
commit
e576a6ef81
6 changed files with 319 additions and 127 deletions
  1. 19 1
      src/css/index_home.css
  2. 25 5
      src/css/service.css
  3. 102 49
      src/js/index.js
  4. 25 1
      src/js/service.js
  5. 38 56
      template/index.html
  6. 110 15
      template/service.html

+ 19 - 1
src/css/index_home.css

@@ -13,7 +13,7 @@ html{font-size:62.5%;}
   
 /*banner*/
 .banner{clear: both;position: relative;padding-top: 44px;width: 1000px;margin: 0 auto;}
-.banner_txt h3{font-size: 30px;font-weight: none;color: #565555;margin-top: 55px;margin-bottom: 24px;}
+.banner_txt h3{font-size: 30px;font-weight: 400;color: #565555;margin-top: 55px;margin-bottom: 24px;}
 .banner_txt p{font-size: 14px;color: #565555;line-height: 24px;}
 .img_list ol li{float: left;margin-left:10px ;border: 1px solid transparent;}
 .img_list{overflow: hidden;margin-top: 64px;}
@@ -28,6 +28,24 @@ html{font-size:62.5%;}
 .banner_box{position: absolute;top: 44px ;right:5px;width: 530px;overflow: hidden;}
 .banner_box ul li{float: left;width: 530px;}
 .banner_txt{padding-bottom: 60px;}
+
+/*新的banner*/
+.banner_all{position: relative;width:1000px;height:380px;margin:0 auto;}
+.carousel_top{ position:absolute; top:0;right:0;overflow: hidden; width:530px;height:340px;}
+.ct-img-big{ position:absolute; }
+.ct-img-big li{ float: left; }
+.ct-img-big li img{width:530px;height:340px;}
+.btnl{ position: absolute; }
+.btn-next{top:180px;right:-50px;}
+.btn-pre{top:180px;left:-50px;}
+.ct-img-small{ position:absolute;left:0px;bottom:100px;}
+.ct-img-small li{ float: left;width:72px;height:50px;border:1px solid transparent; margin-left:10px;
+    cursor: pointer;}
+.ct-img-small li.active{border:1px solid  #52de00;box-shadow: 0px 0px 5px 0px #52de00;}
+.ct-img-small li img{width:100%;height:100%;}
+.banner_all span{display: none;position: absolute;width:400px;height:200px;top:50px;left:20px;}
+.banner_all span.text-block{display: block;}
+.banner_all span h2{font-size: 26px;}
 /*active的css*/
 #active{width:1200px;height:240px;margin:0 auto;padding-top:50px;position: relative;}
 #active>.title{width:70px;height:160px;padding-top:12px; }

+ 25 - 5
src/css/service.css

@@ -44,7 +44,7 @@ line-height: 120px;}
 .Intellectual .container{width: 1200px;}
 .Intellectual ul li{float: left;width: 360px;height: 450px;margin-left: 44px;}
 .Intellectual ul li:first-child{margin-left: 0;}
-.Intellectual_left{width: 360px;height: 145px;background: url(../../img/service_1.png);}
+.Intellectual_left{width: 360px;height: 145px;background: url(../../img/service_1.png);background-size: 100% 100%;}
 .Intellectual_left h4{font-weight: normal;line-height: 90px;font-size: 20px;color: #f68705;margin-left: 56px;}
 .Intellectual_left span{margin-top: 10px;font-size: 12px;color: #797979;text-align: left!important;line-height: 18px;display: inline-block;float: left;margin-left: 56px;}
 .Intellectual ul li:first-child+li{background: url(../../img/service_2.png) no-repeat;padding-top: 102px;}
@@ -59,16 +59,21 @@ line-height: 120px;}
 
 .customer_main{width: 400px;margin: 0 auto;}
 .customer hr{width: 1200px;margin: 0 auto;}
-.customer_main span{font-size: 40px;color: #074d88;width: 184px;text-align: center;line-height: 120px;display: inline-block;}
+.customer_main span{font-size: 40px;color: #074d88;width: 180px;text-align: center;line-height: 120px;display: inline-block;}
 .that{border-bottom: 2px solid #074d88;}
-.customer_company{margin-top: 80px;}
+.customer_company{margin: 80px auto 0;}
 .customer_company li{float: left;width: 274px;margin-left: 14px;overflow: hidden;}
 .customer_company li:first-child{margin-left:0 ;}
 .customer_company li p{width: 100%;line-height: 52px;text-align: center;font-size: 16px;color: #333333;background: #ffffff;border: 1px solid #cccccc;margin-top: -2px;}
 .thon p{background: #ffb200!important;color: #FFFFFF!important;border: 1px solid transparent!important;}
 .customer_circle{clear: both;width: 85px;margin: 0 auto;overflow: hidden;padding-top: 58px;padding-bottom: 36px;}
 .customer_circle li{width: 15px;height: 15px;border-radius: 50%;background: #d5d6d8;float: left;margin-left: 5px;}
-
+.customer_circle li.thonli{background: #909193;}
+.change_right{display:none;}
+#office{cursor: pointer;}
+#custom{cursor: pointer;}
+#bursar{display:none;}
+#lawyer{display:none;}
 
 .technology{width: 100%;height:580px;background: url(../../img/service_10.png) no-repeat center;}
 .technology h3{margin-left: 700px;font-size: 50px;color: #ffffff;margin-top: 30px;font-weight: normal}
@@ -81,7 +86,9 @@ line-height: 120px;}
 .cooperation{width: 100%;background: #f0f0f2;}
 .cooperation h4{font-size: 40px;color: #074d88;font-weight:normal;text-align: center;margin-top: 82px;margin-bottom: 22px;}
 .cooperation ol{width: 744px;margin: 0 auto;overflow: hidden;margin-bottom: 36px;}
-.cooperation ol li{float: left;width: 216px;height: 56px;border: 1px  solid #6a6a6a;text-align: center;line-height: 56px;font-size: 24px;color: #6a6a6a;margin: 0 16px;}
+.cooperation ol li{float: left;width: 216px;height: 56px;border: 1px  solid #6a6a6a;text-align: center;
+    line-height: 56px;font-size: 24px;color: #6a6a6a;margin: 0 16px;cursor: pointer;}
+.cooperation ol li.check_li{border-top:3px solid #EEA203; }
 .cooperation ul{clear: both;overflow: hidden;}
 .cooperation ul li{width: 270px;float: left;margin-left: 20px;overflow: hidden;position: relative;z-index: 10;height: 385px;overflow: hidden;}
 .cooperation ul li:first-child{margin-left: 0;}
@@ -99,3 +106,16 @@ line-height: 120px;}
 .bottom>img{height: 310px;}
 .bottom_text{margin-top: -100px;}
 .pub_fix{z-index: 999;}
+
+
+
+
+
+
+
+
+
+
+
+
+

+ 102 - 49
src/js/index.js

@@ -23,58 +23,111 @@ $(function(){
 		}
 		$('.need_imgs ul').animate({'marginLeft':-(liwit+20)*k},1000)
 	});
-	//首页轮播
-	$('.index_tt .banner_txt').eq(0).show().siblings().hide();	
-	var $ct=$('.banner_box ul'),
-    		$items=$ct.children(),
-    		$pre=$('.index_pre'),
-    		$next=$('.banner_next'),
-    		imgCount=$items.length,
-    		imgWidth=$items.width();
-    		$ct.append($items.first().clone());
-    		$ct.prepend($items.last().clone());    		
-	var	newCount=$ct.children().length;
-		$ct.css({marginLeft:0-imgWidth,width:newCount*imgWidth});    		
-		$next.on('click',function(){      			
-				playnext();    			    			
-		})
-		$pre.on('click',function(){      			
-				playpre();   		   			
-		})
-	var curidx =0;
-	var mov = 1;	
-		function playnext(){
-			$ct.animate({marginLeft:'-='+mov*imgWidth},1000,function(){
-				curidx+=mov;
-				if(curidx===imgCount){
-					$ct.css({marginLeft:0-imgWidth});
-					curidx=0;
-				}    				
+	//首页轮播图
+	(function(){
+		var  $imgBig=$('.ct-img-big'),
+			$btnNext=$('.btn-next'),
+			$btnPre=$('.btn-pre'),
+			$CT = $('.carousel_top'),
+			$imgSmall=$('.ct-img-small');
+		var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
+		var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
+// 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
+		var  $firstImg=$imgBig.find('li').first(),
+			$lastImg=$imgBig.find('li').last();
+		$imgBig.prepend($lastImg.clone());
+		$imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
+		$imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
+		$imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
+		var pageIndex = 0 ; //img的下标;
+		var isAnimate = false;//防止重复点击 上锁
+
+		$btnNext.on('click',function(e){
+			e.preventDefault();
+			playNext()
+
+			setTimeout(function(){
+
+			},1500)
+		});
+		$btnPre.on('click',function(e){
+			e.preventDefault();
+			playPre()
+
+			setTimeout(function(){
+
+			},1500)
+		});
+
+		$imgSmall.find('li').on('click',function(){
+			var smallIdx= $(this).index();
+			if(smallIdx>pageIndex){
+				playNext(smallIdx-pageIndex);
+
+			}
+			else if(smallIdx<pageIndex){
+				playPre(pageIndex-smallIdx);
+
+			}
+		});
+		function playNext(n){
+			var idx = n ||1;
+			if(isAnimate) return;
+			isAnimate = true;
+			$imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},function(){
+				//如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
+				pageIndex = pageIndex+idx;
+				if( pageIndex ===$imgLength ){
+					$imgBig.css({'left':'-'+$imgWidth+'px'})
+					pageIndex = 0;
+				}
+				isAnimate = false;
+				smallImg()
 			})
-			$('.index_tt .banner_txt').eq(curidx).show().siblings().hide();			
-		}		
-		function playpre(){
-			$ct.animate({marginLeft:'+='+mov*imgWidth},1000,function(){
-				curidx-=mov;
-				if(curidx<0){
-					$ct.css({marginLeft:0-imgWidth*imgCount});
-					curidx=imgCount-1;
-				}    				
+		}
+		function playPre(n){
+			var idx = n ||1;
+			if(isAnimate) return;
+			isAnimate = true;
+			$imgBig.animate({'left':'+='+$imgWidth*idx+'px'},function(){
+				pageIndex=pageIndex-idx;
+				if(pageIndex<0){
+					$imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
+					pageIndex = $imgLength-1;
+				}
+				isAnimate = false;
+				smallImg()
 			})
-			$('.index_tt .banner_txt').eq(curidx).show().siblings().hide();			
 		}
-	
-	var timer=setInterval(playnext,3000)
-	$('.banner').mouseenter(function(){
-		clearInterval(timer)
-	})
-	$('.banner').mouseleave(function(){
-		timer=setInterval(playnext,3000)
-	})				
-	$('.img_list ol li').hover(function(){		
-	   var simg = $(this).children('img').attr('src')	   
-	   $('.banner_box ul li').eq(curidx+1).find('img').attr('src',simg)
-	})	
+//设置小图的class
+		function smallImg(){
+			$imgSmall.children()
+				.removeClass('active')
+				.eq(pageIndex) .addClass('active');
+			$(".banner_all span").removeClass("text-block").eq(pageIndex).addClass("text-block");
+		}
+//自动轮播 鼠标进入鼠标离开
+		var timer =setInterval(function(){
+			playNext();
+
+		},2000);
+		$CT.hover(function(){
+			clearInterval(timer)
+		},function(){
+			timer =setInterval( function(){
+				playNext();
+
+			},2000)
+		});
+		$imgSmall.hover(function(){
+			clearInterval(timer)
+		},function(){
+			timer =setInterval( function(){
+				playNext();
+
+			},2000)
+		});
+	})();
 });
 
 

+ 25 - 1
src/js/service.js

@@ -4,6 +4,30 @@ import '../css/public.css';
 import '../css/service.css';
 import './public.js';
 import './main_public.js'
-
+(function(){
+        //分公司和大客户进行tab切换
+    $("#office").click(function(){
+        $(this).removeClass("that").addClass("that");
+        $("#custom").removeClass("that");
+        $(".change_left").css("display","block");
+        $(".change_right").css("display","none");
+    });
+    $("#custom").click(function(){
+        $(this).removeClass("that").addClass("that");
+        $("#office").removeClass("that");
+        $(".change_right").css("display","block");
+        $(".change_left").css("display","none");
+    });
+    $(".customer_company li").hover(function(){
+        $(this).addClass("thon").siblings().removeClass("thon");
+        var lilength=$(this).index();
+        $(this).parent().next().children().removeClass("thonli").eq(lilength).addClass("thonli")
+    });
+    $(".work_office li").hover(function(){
+        $(this).addClass("check_li").siblings().removeClass("check_li");
+        var olli_index=$(this).index();
+        $(this).parent().parent().children("ul").css("display","none").eq(olli_index).css("display","block");
+    })
+})();
 
 

+ 38 - 56
template/index.html

@@ -32,62 +32,44 @@
   			</div>
   		</div>
   	</header>
-  	<div class="banner container">
-  		<div class="banner_box" >  			 		
-	  		<ul>
-	  			<li><img src="../img/banner1.png" alt="" class="banner_imgs"/></li>	  					  					  				  						  					  		
-	  			<li><img src="../img/6.jpg" alt="" class="banner_imgs"/></li> 		  					  					  									  					  			
-	  			<li><img src="../img/7.jpg" alt="" class="banner_imgs"/></li>	  			
-	  		</ul>
-	  	</div>
-  		<div class="index_tt">
-  			<div class="banner_txt">
-				<h3>1让每一项优秀的技术产生价值</h3>
-				<p>全方位的服务,一应俱全</p>
-				<p>专业的团队助您开启科技成果转化之路</p>
-				<div class="img_list">
-					<ol>
-						<li><img src="../img/x_banner01.png" alt="" /></li>
-						<li><img src="../img/x_banner02.png" alt="" /></li>
-						<li><img src="../img/x_banner03.png" alt="" /></li>
-						<li><img src="../img/x_banner04.png" alt="" /></li>
-						<li><img src="../img/x_banner05.png" alt="" /></li> 							
-					</ol>
-				</div>
-  			</div>
-  			<div class="banner_txt">
-				<h3>2让每一项优秀的技术产生价值</h3>
-				<p>全方位的服务,一应俱全</p>
-				<p>专业的团队助您开启科技成果转化之路</p>
-				<div class="img_list">
-					<ol>
-						<li><img src="../img/x_banner01.png" alt="" /></li>
-						<li><img src="../img/x_banner02.png" alt="" /></li>
-						<li><img src="../img/x_banner03.png" alt="" /></li>
-						<li><img src="../img/x_banner04.png" alt="" /></li>
-						<li><img src="../img/x_banner05.png" alt="" /></li> 							
-					</ol>
-				</div>
-  			</div>
-  			<div class="banner_txt">
-				<h3>3让每一项优秀的技术产生价值</h3>
-				<p>全方位的服务,一应俱全</p>
-				<p>专业的团队助您开启科技成果转化之路</p>
-				<div class="img_list">
-					<ol>
-						<li><img src="../img/x_banner01.png" alt="" /></li>
-						<li><img src="../img/x_banner02.png" alt="" /></li>
-						<li><img src="../img/x_banner03.png" alt="" /></li>
-						<li><img src="../img/x_banner04.png" alt="" /></li>
-						<li><img src="../img/x_banner05.png" alt="" /></li> 							
-					</ol>
-				</div>
-  			</div>
-  		</div>  		
-  		<div class="banner_mid">
-  			<img src="../img/index_pre.png" alt="" class="index_pre" />
-  			<img src="../img/index_next.png" alt="" class="banner_next" />
-  		</div>
+  	<div class="banner_all container">
+		<div class="carousel_top">
+			<ul class="ct-img-big clear">
+				<li data-index=0 ><a href=""><img src="../img/highTech_slide_1.jpg" alt=""/></a></li>
+				<li data-index=1 ><a href=""><img src="../img/highTech_slide_2.jpg" alt=""/></a></li>
+				<li data-index=2 ><a href=""><img src="../img/highTech_slide_3.jpg" alt=""/></a></li>
+				<li data-index=3 ><a href=""><img src="../img/highTech_slide_4.jpg" alt=""/></a></li>
+				<li data-index=4 ><a href=""><img src="../img/highTech_slide_5.jpg" alt=""/></a></li>
+			</ul>
+		</div>
+		<a class="btnl btn-next" href="">
+			<img src="../img/index_next.png" alt=""/>
+		</a>
+		<a class="btnl btn-pre" href="">
+			<img src="../img/index_pre.png" alt=""/>
+		</a>
+		<ul class="ct-img-small clear">
+			<li class="active"><img src="../img/highTech_slide_1.jpg" alt=""/></li>
+			<li><img src="../img/highTech_slide_2.jpg" alt=""/></li>
+			<li><img src="../img/highTech_slide_3.jpg" alt=""/></li>
+			<li><img src="../img/highTech_slide_4.jpg" alt=""/></li>
+			<li><img src="../img/highTech_slide_5.jpg" alt=""/></li>
+		</ul>
+    <span class="text-block">
+        <h2>一、让每一项优秀的技术产生价值</h2>
+    </span>
+    <span>
+        <h2>二、让每一笔资金能增值</h2>
+    </span>
+     <span>
+        <h2>三、让每一位专家不被埋没</h2>
+    </span>
+     <span>
+        <h2>四、让每一家公司蒸蒸日上</h2>
+    </span>
+     <span>
+        <h2>五、让每一个创业者实现梦想</h2>
+    </span>
   	</div>
   	<div class="index_activity">
 		<div class="container">

+ 110 - 15
template/service.html

@@ -139,7 +139,7 @@
   					<p>做专利原件5</p>
   					<p class="number_ten">现价1 限量</p>
   					<p >100个</p>
-  					<p class="time">限10月10号之前</span>
+  					<p class="time">限10月10号之前</p>
   				</li>
   				<li>
   					<p>政府补助<span>10万</span></p>
@@ -150,35 +150,62 @@
   	</div>
   	<div class="customer">
   		<div class="customer_main container">
-  			<span class="that">分公司</span><span>大客户</span>  			
+  			<span class="that" id="office">分公司</span>
+			<span id="custom">大客户</span>
   		</div>
   		<hr />
-  		<div class="container">
+  		<div class="container change_left">
 	  		<ul class="customer_company">
-	  			<li>
+	  			<li class="thon">
 	  				<img src="../img/service_6.png"/>
-	  				<p>法拉利123</p>
+	  				<p>法拉利456</p>
 	  			</li>
-	  			<li class="thon">
+	  			<li>
 	  				<img src="../img/service_6.png"/>
-	  				<p>法拉利123</p>
+	  				<p>法拉利456</p>
 	  			</li>
 	  			<li>
 	  				<img src="../img/service_6.png"/>
-	  				<p>法拉利123</p>
+	  				<p>法拉利457</p>
 	  			</li>
 	  			<li>
 	  				<img src="../img/service_6.png"/>
-	  				<p>法拉利123</p>
+	  				<p>法拉利456</p>
 	  			</li>
 	  		</ul>
 	  		<ol class="customer_circle">
-	  			<li></li>
+	  			<li class="thonli"></li>
 	  			<li></li>
 	  			<li></li>
 	  			<li></li>
 	  		</ol>
   		</div>
+		<div class="container change_right">
+			<ul class="customer_company">
+				<li class="thon">
+					<img src="../img/service_6.png"/>
+					<p>法拉利123</p>
+				</li>
+				<li>
+					<img src="../img/service_6.png"/>
+					<p>法拉利123</p>
+				</li>
+				<li>
+					<img src="../img/service_6.png"/>
+					<p>法拉利123</p>
+				</li>
+				<li>
+					<img src="../img/service_6.png"/>
+					<p>法拉利123</p>
+				</li>
+			</ul>
+			<ol class="customer_circle">
+				<li class="thonli"></li>
+				<li></li>
+				<li></li>
+				<li></li>
+			</ol>
+		</div>
   	</div>
   	<div class="technology">
   		<div class="container">
@@ -198,12 +225,12 @@
   	<div class="cooperation">
   		<div class="container">
   			<h4>合作服务机构</h4>
-  			<ol>
-  				<li>专利事务所</li>
-  				<li>会计事务所</li>
-  				<li>律师事务所</li>
+  			<ol class="work_office">
+  				<li class="patent check_li">专利事务所</li>
+  				<li class="bursar">会计事务所</li>
+  				<li class="lawyer">律师事务所</li>
   			</ol>
-  			<ul>
+  			<ul id="patent">
   				<li>
   					<img src="../img/service_11.png" alt=""/>
 	  				<p>活生生专利事务</p>
@@ -237,6 +264,74 @@
 	  				</div>
   				</li>
   			</ul>
+			<ul id="bursar">
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>会计事务所</p>
+					<div class="coop_text">
+						<h6>会计事务所</h6>
+						<p>年加拿大 睡多久才能发生大家看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>会计事务所</p>
+					<div class="coop_text">
+						<h6>会计事务所</h6>
+						<p>年加拿大 睡多久才能发生大家看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>会计事务所</p>
+					<div class="coop_text">
+						<h6>会计事务所</h6>
+						<p>年加拿大 睡多久才能发生大家看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>会计事务所</p>
+					<div class="coop_text">
+						<h6>会计事务所</h6>
+						<p>年加拿大 睡多久才能发生大家看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+			</ul>
+			<ul id="lawyer">
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>活生生专利事务</p>
+					<div class="coop_text">
+						<h6>律师事务所</h6>
+						<p>看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>律师事务所</p>
+					<div class="coop_text">
+						<h6>律师事务所</h6>
+						<p>年加拿大 睡多久才能发生大家看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>律师事务所</p>
+					<div class="coop_text">
+						<h6>律师事务所</h6>
+						<p>年加拿大 睡多久才能发生大家看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+				<li>
+					<img src="../img/service_11.png" alt=""/>
+					<p>律师事务所</p>
+					<div class="coop_text">
+						<h6>律师事务所</h6>
+						<p>年加拿大 睡多久才能发生大家看女生对苍井空块九点半纳斯达克就看你的见死不救</p>
+					</div>
+				</li>
+			</ul>
   		</div>
   	</div>
   	<div class="img_city"></div>