Skip to content

T
test
提交 86e81661 作者: 武宏岩
操作

支持，完整视频轮播

上级 610f6f2d
正在显示 包含 51 行增加 和 59 行删除
contactus.html
...@@ -154,17 +154,15 @@ ...@@ -154,17 +154,15 @@
<div class="introduce_box wow animated fadeInUp"> <div class="introduce_box wow animated fadeInUp">
<div id="test1"> <div id="test1">
<ul class="lateral-fold" data-event="click"> <ul class="lateral-fold" data-event="click">
<li class="on first firsted" > <li class="on first firsted" >
<div class="shadow"> <div class="oness">品牌</div>
<div class="oness">品牌</div> <div class="sected">
<div class="sected"> <p class="two">品牌支持</p>
<p class="two">品牌支持</p> <p>十四年名企（2004年-2018年）</p>
<p>十四年名企（2004年-2018年）</p> <p>河北省唯一一家商务部备案房地产企业</p>
<p>河北省唯一一家商务部备案房地产企业</p> <p>唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业</p>
<p>唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业</p> <p>唐山市具有网签资质的房地产企业</p>
<p>唐山市具有网签资质的房地产企业</p> </div>
</div>
</div>
</li> </li>
<li class="on"> <li class="on">
<div class="shadow"> <div class="shadow">
......
css/contactus.css
...@@ -357,85 +357,80 @@ ...@@ -357,85 +357,80 @@
height:400px; height:400px;
width:118px; width:118px;
margin-right: 11px; margin-right: 11px;
position: relative;
} }
#test1 ul .last{ #test1 ul .last{
margin-right: 0; margin-right: 0;
} }
#test1 ul li:nth-of-type(1){ #test1 ul li:nth-of-type(1){
width: 536px; width: 536px;
background: url(../images/a1.png) no-repeat; background: url(../images/a1.jpg) no-repeat;
transition: background 0.4s ease-in,width 0.6s; transition: background 0.4s ease-out 0.3s,width 0.6s;
} }
#test1 ul .firsted:nth-of-type(1){ #test1 ul .firsted:nth-of-type(1){
width: 536px; width: 536px;
background: url(../images/a.png) no-repeat; background: url(../images/a.jpg) no-repeat;
transition: background 0.4s ease-in,width 0.6s; transition: background 0.4s,width 0.6s;
} }
#test1 ul li:nth-of-type(2){ #test1 ul li:nth-of-type(2){
background: url(../images/b1.png) no-repeat; background: url(../images/b1.jpg) no-repeat;
transition: background 0.4s ease-in,width 0.6s; transition: background 0.4s ease-out 0.3s,width 0.6s;
} }
#test1 ul .firsted:nth-of-type(2){ #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; transition: background 0.4s ease-in,width 0.6s;
} }
#test1 ul li:nth-of-type(3){ #test1 ul li:nth-of-type(3){
background: url(../images/c1.png) no-repeat; background: url(../images/c1.jpg) no-repeat;
transition: background 0.4s ease-in,width 0.6s; transition: background 0.4s ease-out 0.3s,width 0.6s;
} }
#test1 ul .firsted:nth-of-type(3){ #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; transition: background 0.4s ease-in,width 0.6s;
} }
#test1 ul li:nth-of-type(4){ #test1 ul li:nth-of-type(4){
background: url(../images/d1.png) no-repeat; background: url(../images/d1.jpg) no-repeat;
transition: background 0.4s ease-in,width 0.6s; transition: background 0.4s ease-out 0.3s,width 0.6s;
} }
#test1 ul .firsted:nth-of-type(4){ #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; transition: background 0.4s ease-in,width 0.6s;
} }
#test1 ul li:nth-of-type(5){ #test1 ul li:nth-of-type(5){
background: url(../images/e1.png) no-repeat; background: url(../images/e1.jpg) no-repeat;
transition: background 0.4s ease-in,width 0.6s; transition: background 0.4s ease-out 0.3s,width 0.6s;
} }
#test1 ul .firsted:nth-of-type(5){ #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; transition: background 0.4s ease-in,width 0.6s;
} }
#test1 ul li:nth-of-type(6){ #test1 ul li:nth-of-type(6){
background: url(../images/f1.png) no-repeat; background: url(../images/f1.jpg) no-repeat;
transition: background 0.4s ease-in,width 0.6s; transition: background 0.4s ease-out 0.3s,width 0.6s;
} }
#test1 ul .firsted:nth-of-type(6){ #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; transition: background 0.4s ease-in,width 0.6s;
} }
#test1 .on .shadow:nth-of-type(1){
background: rgba(0,0,0,0.5); #test1 .on p{
width: 100%;
height: 100%;
position: relative;
transition: all linear 500ms;
}
#test1 .on .shadow p{
color: #fff; color: #fff;
text-align: right; text-align: right;
} }
#test1 .on .shadow .two{ #test1 .on .two{
font-size: 23.37px; font-size: 23.37px;
font-family:"Microsoft Yahei" ; font-family:"Microsoft Yahei" ;
font-weight: bold; font-weight: bold;
} }
#test1 .on .shadow .sected{ #test1 .on .sected{
position: absolute; position: absolute;
top: 220px; top: 220px;
right: 15px; right: 15px;
} }
#test1 .on .shadow .oness{ #test1 .on .oness{
width: 90px; width: 90px;
height: 90px; height: 90px;
line-height: 90px; line-height: 90px;
...@@ -457,10 +452,10 @@ ...@@ -457,10 +452,10 @@
background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
} }
#test1 .on .shadow .twor{ #test1 .on .twor{
left: 15px; left: 15px;
} }
#test1 .on .shadow .secteds{ #test1 .on .secteds{
display: none; display: none;
} }
/* 加盟流程 */ /* 加盟流程 */
......
js/about.js
...@@ -76,35 +76,36 @@ window.onload = function () { ...@@ -76,35 +76,36 @@ window.onload = function () {
if(sss[i].paused===true){ if(sss[i].paused===true){
}else{ }else{
clearInterval(timer); clearInterval(timer);
return ; return ;
} }
} }
} }
var aaa = true;
$("#videoBox li").bind("click","video",function(){ $("#videoBox li").bind("click","video",function(){
$(this).children(".switch").css("background-image","url(images/switch1.jpg)") $(this).children(".switch").css("background-image","url(images/switch1.jpg)")
$(this).children(".switch").fadeOut(500)
let url = this.getElementsByTagName("video")[0] let url = this.getElementsByTagName("video")[0]
if(aaa == true){ if(url.paused == true){
aaa = false;
url.play(); url.play();
$(this).siblings("li").each(function(i,el){ for(let i =0;i<$(this).siblings().find("video").length;i++){
el.children[0].pause(); $(this).siblings().find("video")[i].pause()
clearInterval(timer); }
}) $(this).siblings().find("div").css("background-image","url(images/switch.jpg)")
}else{ }else{
aaa = true; $(this).find("div").css("background-image","url(images/switch.jpg)")
$("#videoBox li .switch").css("background-image","url(images/switch.jpg)")
$("#videoBox li .switch").fadeIn()
url.pause() url.pause()
} }
}) })
$("#videoBox li").mouseover(function(){
for(let i =0;i<$("#videoBox li").length;i++){
$(this).find(".switch").show();
}
});
video_box.onmouseover=function(){ video_box.onmouseover=function(){
clearInterval(timer); clearInterval(timer);
}; };
video_box.onmouseout=function(){ video_box.onmouseout=function(){
autoPlay(); autoPlay();
aa(); aa();
$("#videoBox li .switch").hide()
} }
window.onscroll = function(){ window.onscroll = function(){
show_scroll() show_scroll()
......
js/common.js
...@@ -42,12 +42,10 @@ var common = function () { ...@@ -42,12 +42,10 @@ var common = function () {
$(".on").click(function(){ $(".on").click(function(){
$(this).css("width","536px").siblings().css("width","118px"); $(this).css("width","536px").siblings().css("width","118px");
$(this).addClass('firsted').siblings().removeClass('firsted'); $(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).find(".oness").css("left","430px");
$(this).siblings().find(".oness").css("left","15px"); $(this).siblings().find(".oness").css("left","15px");
$(this).find(".shadow .sected").css("display","block"); $(this).find(".sected").css("display","block");
$(this).siblings().find(".shadow .sected").css("display","none"); $(this).siblings().find(".sected").css("display","none");
}) })
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论