ws2z3gr2017 7 years ago
parent
commit
520e8e60d6
5 changed files with 80 additions and 47 deletions
  1. BIN
      img/hot .png
  2. 1 1
      src/css/index_home.css
  3. 15 8
      src/css/public.css
  4. 58 32
      src/js/public.js
  5. 6 6
      template/index.html

BIN
img/hot .png


+ 1 - 1
src/css/index_home.css

@@ -9,7 +9,7 @@ body{font:14px "simsun",Arial,Helvetica,sans-serif;width:100%;
     user-select:none;
 }
 body,h1,h2,h3,h4,h6,p,ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
-body{padding-top: 74px;}
+
 a{color:#000;text-decoration:none;}
 a:hover{color:#000;text-decoration:none;}
 .lf{float:left;}

+ 15 - 8
src/css/public.css

@@ -4,21 +4,28 @@ a:hover{text-decoration: none;}
 ul,ol,li{list-style: none;padding: 0;margin: 0;}
 p,h3{margin: 0;padding: 0;}
 /*顶部区域*/
-body{padding-top: 74px;}
-header{width: 100%;background: #f0f0f0;line-height: 74px;height: 74px;position: fixed;top: 0;left: 0;z-index: 99999;box-shadow: 2px 4px 10px #CCCCCC;}
+header{width: 100%;background: #ffffff;line-height: 74px;height: 74px;}
 header .logo{float: left;padding-left: 20px;}
+.h_fix{position: fixed;top: 0;left: 0;z-index: 99999;box-shadow: 2px 4px 10px #CCCCCC;}
 
 header .nav{float: left;padding-left: 90px;}
 header .nav ul li{float: left;width: 120px;text-align: center;line-height: 76px;}
-header .nav ul li a{color: #064a74;width: 120px;line-height: 76px;display: inline-block;font-size: 16px;}
-header .nav ul li:hover a{background: url(../../img/index_nav_bj.png) no-repeat center center;color: #FFFFFF;background-position-y:19px }
-.active{background: url(../../img/index_nav_bj.png) no-repeat center center;background-position-y:19px ;}
-.active a{color: #FFFFFF!important;}
+header .nav ul li a{color: #333333;width: 120px;line-height: 76px;display: inline-block;font-size: 16px;}
+header .nav ul li:hover a{color: #074F88;}
+/*hot*/
+.nav ul li:hover img{animation: hot 1s infinite linear;transition: all 1s;}
+@keyframes hot{
+	 0%   {width: 30px;height: 30px;}
+    25%  {width: 25px;height: 25px; top: 9px;}
+    50%  {width: 30px;height: 30px;}
+    100% {width: 25px;height: 25px;top: 9px;}
+}
+
 header .nav_right{float: right;padding-right: 40px;}
 header .nav_right a{color: #333333;margin: 2px;}
 header .nav_right a:hover{color: #2a6597;}
 .nav ul li {position: relative;}
-.nav ul li img{width: 20px;height: 20px;position: absolute;right: 8px;top: 19px;}
+.nav ul li img{width: 30px;height: 30px;position: absolute;right: 0px;top: 9px;}
 /*banner*/
 
 .banner{clear: both;position: relative;padding-top: 44px;width: 1000px;margin: 0 auto;}
@@ -41,6 +48,6 @@ header .nav_right a:hover{color: #2a6597;}
 .banner_imgs{width:100%;height: 340px;}
 
 .banner_box{position: absolute;top: 44px ;right:5px;width: 530px;overflow: hidden;}
-.banner_box ul{width: 1000000px;overflow: hidden;}
+
 .banner_box ul li{float: left;width: 530px;}
 .banner_txt{padding-bottom: 60px;}

+ 58 - 32
src/js/public.js

@@ -1,40 +1,66 @@
 
 $(function(){
-	$('.index_tt .banner_txt').eq(0).show().siblings().hide();
-	var i=0;
-	var wimg=$('.banner_box ul li').width();
-	var lilength=$('.banner_box ul li').length;
-	function next(){
-		i++;
-		if(i>lilength-1){
-			i=0;			
-		};		
-		$('.banner_box ul').animate({'marginLeft':-wimg*(i)+'px'})
-		$('.index_tt .banner_txt').eq(i).show().siblings().hide();
-	}
-	function pre(){
-		i--;
-		if(i<0){
-			i =	lilength-1			
-			}
-		$('.banner_box ul').animate({'marginLeft':-wimg*i+'px'})
-		$('.index_tt .banner_txt').eq(i).show().siblings().hide();
-	}	
-	var timer=setInterval(next,2000)
+	$('.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;
+	var lock=false;
+		function playnext(){
+			$ct.animate({marginLeft:'-='+mov*imgWidth},function(){
+				curidx++;
+				if(curidx===imgCount){
+					$ct.css({marginLeft:0-imgWidth});
+					curidx=0;
+				}    				
+			})
+			$('.index_tt .banner_txt').eq(curidx).show().siblings().hide();			
+		}		
+		function playpre(){
+			$ct.animate({marginLeft:'+='+mov*imgWidth},function(){
+				curidx--;
+				if(curidx===(-1)){
+					$ct.css({marginLeft:0-imgWidth*imgCount});
+					curidx=3;
+				}    				
+			})
+			$('.index_tt .banner_txt').eq(curidx).show().siblings().hide();			
+		}
+	
+	var timer=setInterval(playnext,3000)
 	$('.banner').mouseenter(function(){
 		clearInterval(timer)
 	})
 	$('.banner').mouseleave(function(){
-		timer=setInterval(next,2000)
-	})	
-	$('.banner_next').click(function(){		
-		next();								
-	})
-	$('.index_pre').click(function(){		
-		pre();						
-	})	
-	$('.img_list ol li').hover(function(){
+		timer=setInterval(playnext,3000)
+	})				
+	$('.img_list ol li').hover(function(){		
 	   var simg = $(this).children('img').attr('src')	   
-	   $('.banner_box ul li').eq(i).find('img').attr('src',simg)
-	})		
+	   $('.banner_box ul li').eq(curidx+1).find('img').attr('src',simg)
+	})	
+	//导航
+	$(window).scroll(function(){
+		var scrolltop=$(document).scrollTop()
+			if(scrolltop>400){				
+				$('header').addClass('h_fix')				
+				$('body').css({paddingTop:'74px'})
+			}else{
+				$('header').removeClass('h_fix')
+				$('body').css({paddingTop:0})
+			}
+		});	
 })

+ 6 - 6
template/index.html

@@ -19,12 +19,12 @@
   			<div class="logo"><a href="../template/index.html"><img src="../img/Logo111.png" alt="" title="技淘"/></a></div>
   			<div  class="nav">
   				<ul>
-  					<li class="active"><a href="">科技服务</a><img src="../img/hot.png"/></li>
-  					<li><a href="">技术交易</a></li>
-  					<li><a href="">智库咨询</a></li>
-  					<li><a href="">科技金融</a></li>
-  					<li><a href="">科技活动</a></li>
-  					<li><a href="">平台共建</a></li> 					
+  					<li class="active"><a href="#">科技服务</a><img src="../img/hot .png"/></li>
+  					<li><a href="#">技术交易</a></li>
+  					<li><a href="#">智库咨询</a></li>
+  					<li><a href="#">科技金融</a></li>
+  					<li><a href="#">科技活动</a></li>
+  					<li><a href="#">平台共建</a></li> 					
   				</ul>
   			</div>
   			<div class="nav_right">