dengzhiguo 6 년 전
부모
커밋
d36cf2eade

BIN
img/indedImg/inded31.jpg


BIN
img/indedImg/inded32.jpg


BIN
img/indedImg/inded33.jpg


BIN
img/indedImg/inded34.jpg


BIN
img/indedImg/inded35.jpg


BIN
img/indedImg/inded36.jpg


BIN
img/indedImg/inded6.png


BIN
img/indedImg/inded7.png


BIN
img/indedImg/inded8.png


BIN
img/indedImg/inded9.png


BIN
img/indedImg/searchImg.png


BIN
img/newMenu/searchImg.png


+ 28 - 9
src/css/inded.css

@@ -1,7 +1,17 @@
-.header div>div.APP{float:left;position: relative;cursor: pointer;}
+.header div>div.APP{float:left;position: relative;cursor: pointer;padding: 0 10px;}
 div.APP>div.xialaewm{width:230px;height:120px;position: absolute;margin-left:0px;float: none;
 display:none;justify-content: space-between;background-color: #fff;}
 div.APP:hover>div.xialaewm{display:flex;}
+div.APP:hover{background-color: #fff;}
+
+.search-inp a.zaixian{right:150px;background-color: #1797E9;}
+.searchImg{position: absolute;top:10px;right:20px;z-index: 10;cursor: pointer;}
+
+
+
+
+
+
 .webkitDown{
     width: 12px;
     height: 8px;
@@ -34,13 +44,14 @@ display: flex;justify-content: space-around;padding: 35px 40px;}
 #wield{width:100%;margin-top: 40px;}
 .wield_cont{width:1200px;height:400px;margin: 20px auto;text-align: center;}
 
-.brands{width:100%;margin-top:-4px;}
+.brands{width:100%;margin-top:-4px;position: relative;}
 .brands>img{width:100%;}
 
 
 #hotProject{width:100%;padding-top: 30px;background:url("../../img/indedImg/inded40.png")no-repeat;}
 .hotProject_cont{width: 1200px;height:700px;margin:30px auto;display: flex;justify-content: space-between;flex-wrap: wrap;}
 .hotProject_cont>div{width:285px;height:335px;background-color: #fff;}
+.hotProject_cont>div{width:285px;height:165px;}
 .hotProject_cont>div>h3{margin:10px 0 10px 20px;letter-spacing: 2px;}
 .hotProject_cont>div>p{margin-left:20px;letter-spacing: 1px;
 text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 3;}
@@ -79,11 +90,19 @@ border-radius: 5px;margin-top:15px;float: right;text-align: center;color:#1596E8
     display: inline-block;
 }
 
-
-
-
-
-
-
-
+.brands>div{width:16%;height:90%;position: absolute;top:2.5%;right:20%;background-color: #fff;overflow: hidden;}
+.brands>div.brandsDiv{top:4.5%;}
+.brands>div>img{width:100%;height:100%;position:absolute;opacity: 0;}
+.brands>div>img:nth-child(1){opacity: 1;}
+/*.brands>div>img:nth-child(1){transition:opacity 2s linear }*/
+@keyframes imgani{
+	from{opacity: 0;}
+	to{opacity: 1;}
+}
+@keyframes imgbni{
+	from{opacity: 1;}
+	to{opacity: 0;}
+}
+.brands>div>img.ani{animation: imgani 4s linear  1 normal;animation-fill-mode: forwards;}
+.brands>div>img.bni{animation: imgbni 4s linear  1 normal;animation-fill-mode: forwards;}
 

+ 2 - 1
src/css/newMenu/index.css

@@ -79,7 +79,7 @@
     color: #fff;
 }
 .indexSearch .search-inp .input-group{
-    width: 900px;
+    width: 750px;
 }
 .indexSearch .search-inp .input-group .input-group-btn{
     width: 130px;
@@ -87,6 +87,7 @@
 .indexSearch .search-inp .input-group .input-group-btn button{
     width: 100%;
     font-size: 18px;
+    margin-top:-10px;
 }
 .indexSearch .apply{
     cursor: pointer;

+ 19 - 1
src/js/newMenu/index.js

@@ -36,7 +36,7 @@ import 'js/public.js';
 		$(this).siblings().removeClass("active");
 	})
 	//搜索功能
-	$(".searchBtn").click(function(){
+	$(".searchImg").click(function(){
 		//var seachon=$(".jumpType li.active").index();
 		var key=$('.demandSearch').val();
 		sessionStorage.setItem("name",key);
@@ -50,4 +50,22 @@ import 'js/public.js';
 //			default :break;
 //		}
 	})
+	
+	function task(){
+		if($(".brands>div>img:nth-child(1)").hasClass("active")){
+			$(".brands>div>img:nth-child(3)").css("opacity","0");
+			$(".brands>div>img").removeClass("bni").removeClass("ani").removeClass("active");
+			$(".brands>div>img:nth-child(2)").addClass("ani").addClass("active");
+		}else if($(".brands>div>img:nth-child(2)").hasClass("active")){
+			$(".brands>div>img:nth-child(1)").css("opacity","0");
+			$(".brands>div>img").removeClass("bni").removeClass("ani").removeClass("active");
+			$(".brands>div>img:nth-child(3)").addClass("ani").addClass("active");
+		}else if($(".brands>div>img:nth-child(3)").hasClass("active")){
+			$(".brands>div>img:nth-child(2)").css("opacity","0");
+			$(".brands>div>img").removeClass("bni").removeClass("ani").removeClass("active");
+			$(".brands>div>img:nth-child(1)").addClass("ani").addClass("active");
+		}
+		
+	}
+	setInterval(task,4000);
 }())

+ 13 - 3
template/inded.html

@@ -231,7 +231,7 @@
 					<input type="text" class="form-control demandSearch" placeholder="输入你感兴趣的内容">
 					<span class="input-group-btn">
 						<button class="btn btn-default searchBtn" type="button">
-							<img src="../img/newMenu/search-icon.jpg" alt=""> 搜索
+							<img src="../img/newMenu/searchImg.png" alt=""> 搜索
 						</button>
 					</span>
 				</div>
@@ -340,12 +340,22 @@
 		</div>
 		<div class="brands">
 			<img src="../img/indedImg/inded7.png" alt="" />
+			<div class="brandsDiv">
+				<img src="../img/indedImg/inded31.jpg" alt="" class="active"/>
+				<img src="../img/indedImg/inded32.jpg" alt="" />
+				<img src="../img/indedImg/inded33.jpg" alt="" />
+			</div>
 		</div>
 		<div class="brands">
 			<img src="../img/indedImg/inded8.png" alt="" />
 		</div>
 		<div class="brands">
 			<img src="../img/indedImg/inded9.png" alt="" />
+			<div>
+				<img src="../img/indedImg/inded34.jpg" alt="" class="active"/>
+				<img src="../img/indedImg/inded35.jpg" alt="" />
+				<img src="../img/indedImg/inded36.jpg" alt="" />
+			</div>
 		</div>
 		<div id="hotProject">
 			<div class="terrace_title">
@@ -774,8 +784,8 @@
 </body>
 <script language="javascript" src="https://put.zoosnet.net/JS/LsJS.aspx?siteid=PUT70876498&float=1&lng=cn"></script>
 <script src="../src/js/jquery-2.1.0.js"></script>
-<script src="../src/js/banner.js"></script>
-<script src="../src/js/public.js"></script>
+<!--<script src="../src/js/banner.js"></script>-->
+<!--<script src="../src/js/public.js"></script>-->
 <script src="../src/js/newMenu/index.js"></script>
 
 </html>