支持，完整视频轮播

contactus.html

@@ -154,17 +154,15 @@
         <div class="introduce_box wow animated fadeInUp">
         <div id="test1">
             <ul class="lateral-fold" data-event="click">
-                <li class="on first firsted" >
-                    <div class="shadow">
-                        <div class="oness">品牌</div>
-                        <div class="sected">
-                            <p class="two">品牌支持</p>
-                            <p>十四年名企（2004年-2018年）</p>
-                            <p>河北省唯一一家商务部备案房地产企业</p>
-                            <p>唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业</p>
-                            <p>唐山市具有网签资质的房地产企业</p>
-                        </div>
-                    </div>    
+                <li class="on first firsted" > 
+                    <div class="oness">品牌</div>
+                    <div class="sected">
+                        <p class="two">品牌支持</p>
+                        <p>十四年名企（2004年-2018年）</p>
+                        <p>河北省唯一一家商务部备案房地产企业</p>
+                        <p>唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业</p>
+                        <p>唐山市具有网签资质的房地产企业</p>
+                    </div>   
                 </li>
                 <li class="on">
                     <div class="shadow">

css/contactus.css

@@ -357,85 +357,80 @@
    height:400px;
    width:118px;
    margin-right: 11px;
+   position: relative;
 }
 #test1 ul .last{
    margin-right: 0;
 }
 #test1 ul li:nth-of-type(1){
     width: 536px;
-    background: url(../images/a1.png) no-repeat;
-    transition: background 0.4s ease-in,width 0.6s;
+    background: url(../images/a1.jpg) no-repeat;
+    transition: background 0.4s ease-out 0.3s,width 0.6s;
 
 }
 #test1 ul .firsted:nth-of-type(1){
     width: 536px;
-    background: url(../images/a.png) no-repeat;
-    transition: background 0.4s ease-in,width 0.6s;
+    background: url(../images/a.jpg) no-repeat;
+    transition: background 0.4s,width 0.6s;
 }
 #test1 ul li:nth-of-type(2){
-    background: url(../images/b1.png) no-repeat;
-    transition: background 0.4s ease-in,width 0.6s;
+    background: url(../images/b1.jpg) no-repeat;
+    transition: background 0.4s ease-out 0.3s,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(2){
-    background: url(../images/b.png) no-repeat;
+    background: url(../images/b.jpg) no-repeat;
     transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(3){
-    background: url(../images/c1.png) no-repeat;
-    transition: background 0.4s ease-in,width 0.6s;
+    background: url(../images/c1.jpg) no-repeat;
+    transition: background 0.4s ease-out 0.3s,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(3){
-    background: url(../images/c.png) no-repeat;
+    background: url(../images/c.jpg) no-repeat;
     transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(4){
-    background: url(../images/d1.png) no-repeat;
-    transition: background 0.4s ease-in,width 0.6s;
+    background: url(../images/d1.jpg) no-repeat;
+    transition: background 0.4s ease-out 0.3s,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(4){
-    background: url(../images/d.png) no-repeat;
+    background: url(../images/d.jpg) no-repeat;
     transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(5){
-    background: url(../images/e1.png) no-repeat;
-    transition: background 0.4s ease-in,width 0.6s;
+    background: url(../images/e1.jpg) no-repeat;
+    transition: background 0.4s ease-out 0.3s,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(5){
-    background: url(../images/e.png) no-repeat;
+    background: url(../images/e.jpg) no-repeat;
     transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(6){
-    background: url(../images/f1.png) no-repeat;
-    transition: background 0.4s ease-in,width 0.6s;
+    background: url(../images/f1.jpg) no-repeat;
+    transition: background 0.4s ease-out 0.3s,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(6){
-    background: url(../images/f.png) no-repeat;
+    background: url(../images/f.jpg) no-repeat;
     transition: background 0.4s ease-in,width 0.6s;
 }
-#test1 .on .shadow:nth-of-type(1){
-   background: rgba(0,0,0,0.5);
-   width: 100%;
-   height: 100%;
-   position: relative;
-   transition: all linear 500ms;
-}
-#test1 .on .shadow p{
+
+#test1 .on  p{
     color: #fff;
     text-align: right;
 }
-#test1 .on .shadow .two{
+#test1 .on  .two{
     
     font-size: 23.37px;
     font-family:"Microsoft Yahei" ;
     font-weight: bold;
 }
-#test1 .on .shadow .sected{
+#test1 .on  .sected{
     position: absolute;
     top: 220px;
     right: 15px;
     
 }
-#test1 .on .shadow .oness{
+#test1 .on .oness{
     width: 90px; 
     height: 90px; 
     line-height: 90px;
@@ -457,10 +452,10 @@
     background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
 
 }
-#test1 .on .shadow .twor{
+#test1 .on  .twor{
     left: 15px;
 }
-#test1 .on .shadow .secteds{
+#test1 .on .secteds{
     display: none;
 }
   /* 加盟流程 */

js/about.js

@@ -76,35 +76,36 @@ window.onload = function () {
             if(sss[i].paused===true){
             }else{
                 clearInterval(timer);
-                return ;
+                return ;               
             }
         } 
     }
-    var aaa = true;
     $("#videoBox li").bind("click","video",function(){  
         $(this).children(".switch").css("background-image","url(images/switch1.jpg)")
-        $(this).children(".switch").fadeOut(500)
         let url = this.getElementsByTagName("video")[0]
-        if(aaa == true){
-            aaa = false;
+        if(url.paused == true){
             url.play();
-            $(this).siblings("li").each(function(i,el){
-                el.children[0].pause();
-                clearInterval(timer);
-            })
+            for(let i =0;i<$(this).siblings().find("video").length;i++){
+                $(this).siblings().find("video")[i].pause()
+            }
+            $(this).siblings().find("div").css("background-image","url(images/switch.jpg)")
         }else{
-            aaa = true;
-            $("#videoBox li .switch").css("background-image","url(images/switch.jpg)")
-            $("#videoBox li .switch").fadeIn()
+            $(this).find("div").css("background-image","url(images/switch.jpg)")
             url.pause()
         }
     })
+    $("#videoBox li").mouseover(function(){
+        for(let i =0;i<$("#videoBox li").length;i++){
+            $(this).find(".switch").show();
+        }
+    });
     video_box.onmouseover=function(){
         clearInterval(timer);
     }; 
     video_box.onmouseout=function(){
         autoPlay();
         aa();
+        $("#videoBox li .switch").hide()
     }
     window.onscroll = function(){
         show_scroll()

js/common.js

@@ -42,12 +42,10 @@ var common = function () {
     $(".on").click(function(){
         $(this).css("width","536px").siblings().css("width","118px");
         $(this).addClass('firsted').siblings().removeClass('firsted');
-        $(this).find(".shadow").css("width","536px");
-        $(this).siblings().find(".shadow").css("width","118px");
         $(this).find(".oness").css("left","430px");
         $(this).siblings().find(".oness").css("left","15px");
-        $(this).find(".shadow .sected").css("display","block");
-        $(this).siblings().find(".shadow .sected").css("display","none");
+        $(this).find(".sected").css("display","block");
+        $(this).siblings().find(".sected").css("display","none");
     })
 }