Skip to content

Q
qsl_web
Commit 136d31a4 by 邓丽
Options

scroller

parent 8b4120e5
Showing with 262 additions and 78 deletions
dist/css/index.css
...@@ -256,7 +256,7 @@ header > ul li.active a { ...@@ -256,7 +256,7 @@ header > ul li.active a {
border-bottom: 5px solid #1dd2af; border-bottom: 5px solid #1dd2af;
padding-bottom: 21px; padding-bottom: 21px;
} }
header > .login { header > .loginWord {
display: inline-block; display: inline-block;
color: #ffffff; color: #ffffff;
float: right; float: right;
...@@ -1752,6 +1752,7 @@ article.case section:after { ...@@ -1752,6 +1752,7 @@ article.case section:after {
.activity .activeSlide ul li .activeCarousel { .activity .activeSlide ul li .activeCarousel {
height: 260px; height: 260px;
padding: 0; padding: 0;
top: 3px;
} }
.activity .activeSlide ul li .activeCarousel ul li div { .activity .activeSlide ul li .activeCarousel ul li div {
margin: 0 auto; margin: 0 auto;
...@@ -1933,9 +1934,11 @@ article.case section:after { ...@@ -1933,9 +1934,11 @@ article.case section:after {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
letter-spacing: 4px; letter-spacing: 4px;
margin-bottom: 15px;
} }
.login .loginForm small { .login .loginForm small {
height: 30px; display: block;
height: 24px;
font-size: 12px; font-size: 12px;
color: #ff7072; color: #ff7072;
text-align: center; text-align: center;
......
dist/html/aboutUs.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/case.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/caseDetails.html
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/caseSpecific.html
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/gal_activity.html
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
...@@ -51,9 +51,9 @@ ...@@ -51,9 +51,9 @@
</div> </div>
<h2>企业名称</h2> <h2>企业名称</h2>
</div> </div>
<div class="tabs"> <!-- <div class="tabs">
<a class="active">活动</a><a>直播</a> <a class="active">活动</a><a>直播</a>
</div> </div>-->
</section> </section>
<!--合作商家--> <!--合作商家-->
<section class="cooperation activeSlide"> <section class="cooperation activeSlide">
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
<h3><span><i></i>2016.6.25</span>活动名称</h3> <h3><span><i></i>2016.6.25</span>活动名称</h3>
</div> </div>
<div class="custom-container mouseWheelButtons"> <div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a> <a href="#" class="prev" id="prev0"></a> <!--注意：此处id需要从0开始的序列值-->
<div class="carousel case activeCarousel" id="activeCarousel"> <div class="carousel case activeCarousel" id="activeCarousel0">
<ul> <ul>
<li> <li>
<a href="../html/gal_activityDetails.html?c=2"> <a href="../html/gal_activityDetails.html?c=2">
...@@ -111,9 +111,27 @@ ...@@ -111,9 +111,27 @@
<p>企视录影像</p> <p>企视录影像</p>
</a> </a>
</li> </li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul> </ul>
</div> </div>
<a href="#" class="next"></a> <a href="#" class="next" id="next0"></a>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</li> </li>
...@@ -122,8 +140,8 @@ ...@@ -122,8 +140,8 @@
<h3><span><i></i>2016.6.25</span>活动名称2</h3> <h3><span><i></i>2016.6.25</span>活动名称2</h3>
</div> </div>
<div class="custom-container mouseWheelButtons"> <div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a> <a href="#" class="prev" id="prev1"></a>
<div class="carousel case activeCarousel" id="activeCarousel"> <div class="carousel case activeCarousel" id="activeCarousel1">
<ul> <ul>
<li> <li>
<a href="../html/gal_activityDetails.html?c=2"> <a href="../html/gal_activityDetails.html?c=2">
...@@ -154,11 +172,80 @@ ...@@ -154,11 +172,80 @@
</li> </li>
</ul> </ul>
</div> </div>
<a href="#" class="next"></a> <a href="#" class="next" id="next1"></a>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</li> </li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称3</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev2"></a>
<div class="carousel case activeCarousel" id="activeCarousel2">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚1</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚2</h3>
<p>企视录影像</p>
</a>
</li>
<li class="active">
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚3</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚4</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚5</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚6</h3>
<p>企视录影像</p>
</a>
</li>
</ul> </ul>
</div>
<a href="#" class="next" id="next2"></a>
<div class="clear"></div>
</div>
</li>
</ul>
<input type="text" value="" id="text"/>
</section> </section>
</article> </article>
<!--引入公用版权部分--> <!--引入公用版权部分-->
...@@ -177,41 +264,43 @@ ...@@ -177,41 +264,43 @@
<script src="../js/jquery.mousewheel-3.1.12.js"></script> <script src="../js/jquery.mousewheel-3.1.12.js"></script>
<script src="../js/jquery.jcarousellite.min.js"></script> <script src="../js/jquery.jcarousellite.min.js"></script>
<!--五张图轮播效果--> <!--五张图轮播效果-->
<script type="text/javascript"> <script type="text/javascript">
$(".mouseWheelButtons .carousel").jCarouselLite({ window.onload = function(){
btnNext: " .next", /*导航栏选中样式*/
btnPrev: " .prev", GetRequest();
mouseWheel: true,
circular: true,
speed: 1000,
visible: 5,
scroll: 5
});
/* window.onload = function(){ /*多图片滚动效果*/
var n= $("#activeCarousel>ul>li").length; var lis=$(".cooperation>ul>li");
alert(n); var n= lis.length;
if(n<=5){ var liNum=0;
$(".mouseWheelButtons .carousel").jCarouselLite({ for(var i=0;i<n;i++){
var liNum= lis.eq(i).find("li").size();
var next= "#next"+ i;
var prev= "#prev"+i;
if(liNum<=5){
$(".prev").eq(i).css("display","none");
$(".next").eq(i).css("display","none");
$("#activeCarousel"+i).jCarouselLite({
circular: true, circular: true,
speed: 1000, speed: 800,
visible: 5, visible:liNum
scroll: 5
}); });
}else{ }else{
$(".mouseWheelButtons .carousel").jCarouselLite({ $("#activeCarousel"+i).jCarouselLite({
*//* btnNext: " .next", btnNext:next,
btnPrev: " .prev",*//* btnPrev:prev,
mouseWheel: true, mouseWheel: true,
circular: true, circular: true,
speed: 1000, speed: 800,
visible: 5, visible: 5,
scroll: 5 scroll: 5
}); });
} }
}*/ }
}
</script> </script>
<script> <script>
/*案例模块放大效果*/ /*案例模块放大效果*/
......
dist/html/gal_activityDetails.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/gallery.html
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/index.html
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/linkUs.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/privacy.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
dist/html/works.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
src/less/common/header_footer.less
...@@ -27,7 +27,7 @@ header{ ...@@ -27,7 +27,7 @@ header{
} }
} }
} }
>.login{ >.loginWord{
display: inline-block; display: inline-block;
color:#ffffff; color:#ffffff;
float: right; float: right;
......
src/less/index.less
...@@ -828,6 +828,7 @@ article.case { ...@@ -828,6 +828,7 @@ article.case {
.activeCarousel{ .activeCarousel{
height: 260px; height: 260px;
padding: 0; padding: 0;
top:3px;
ul li{ ul li{
div{ div{
.margin-auto(225px,120px); .margin-auto(225px,120px);
...@@ -972,9 +973,11 @@ article.case { ...@@ -972,9 +973,11 @@ article.case {
font-size: 16px; font-size: 16px;
font-weight:600; font-weight:600;
letter-spacing: 4px; letter-spacing: 4px;
margin-bottom: 15px;
} }
small{ small{
height: 30px; display: block;
height: 24px;
font-size: 12px; font-size: 12px;
color: #ff7072; color: #ff7072;
text-align: center; text-align: center;
......
src/pages/common/header.ejs
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<a href="">直播间</a> <a href="">直播间</a>
</li>--> </li>-->
</ul> </ul>
<a class="login" href="../html/login.html"> <a class="loginWord" href="../html/login.html">
登录 登录
</a> </a>
</header> </header>
......
src/pages/gal_activity.ejs
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
</div> </div>
<h2>企业名称</h2> <h2>企业名称</h2>
</div> </div>
<div class="tabs"> <!-- <div class="tabs">
<a class="active">活动</a><a>直播</a> <a class="active">活动</a><a>直播</a>
</div> </div>-->
</section> </section>
<!--合作商家--> <!--合作商家-->
<section class="cooperation activeSlide"> <section class="cooperation activeSlide">
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
<h3><span><i></i>2016.6.25</span>活动名称</h3> <h3><span><i></i>2016.6.25</span>活动名称</h3>
</div> </div>
<div class="custom-container mouseWheelButtons"> <div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a> <a href="#" class="prev" id="prev0"></a> <!--注意：此处id需要从0开始的序列值-->
<div class="carousel case activeCarousel" id="activeCarousel"> <div class="carousel case activeCarousel" id="activeCarousel0">
<ul> <ul>
<li> <li>
<a href="../html/gal_activityDetails.html?c=2"> <a href="../html/gal_activityDetails.html?c=2">
...@@ -87,9 +87,27 @@ ...@@ -87,9 +87,27 @@
<p>企视录影像</p> <p>企视录影像</p>
</a> </a>
</li> </li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul> </ul>
</div> </div>
<a href="#" class="next"></a> <a href="#" class="next" id="next0"></a>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</li> </li>
...@@ -98,8 +116,8 @@ ...@@ -98,8 +116,8 @@
<h3><span><i></i>2016.6.25</span>活动名称2</h3> <h3><span><i></i>2016.6.25</span>活动名称2</h3>
</div> </div>
<div class="custom-container mouseWheelButtons"> <div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a> <a href="#" class="prev" id="prev1"></a>
<div class="carousel case activeCarousel" id="activeCarousel"> <div class="carousel case activeCarousel" id="activeCarousel1">
<ul> <ul>
<li> <li>
<a href="../html/gal_activityDetails.html?c=2"> <a href="../html/gal_activityDetails.html?c=2">
...@@ -130,11 +148,80 @@ ...@@ -130,11 +148,80 @@
</li> </li>
</ul> </ul>
</div> </div>
<a href="#" class="next"></a> <a href="#" class="next" id="next1"></a>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</li> </li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称3</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev2"></a>
<div class="carousel case activeCarousel" id="activeCarousel2">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚1</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚2</h3>
<p>企视录影像</p>
</a>
</li>
<li class="active">
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚3</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚4</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚5</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚6</h3>
<p>企视录影像</p>
</a>
</li>
</ul> </ul>
</div>
<a href="#" class="next" id="next2"></a>
<div class="clear"></div>
</div>
</li>
</ul>
<input type="text" value="" id="text"/>
</section> </section>
</article> </article>
<!--引入公用版权部分--> <!--引入公用版权部分-->
...@@ -145,41 +232,43 @@ ...@@ -145,41 +232,43 @@
<script src="../js/jquery.mousewheel-3.1.12.js"></script> <script src="../js/jquery.mousewheel-3.1.12.js"></script>
<script src="../js/jquery.jcarousellite.min.js"></script> <script src="../js/jquery.jcarousellite.min.js"></script>
<!--五张图轮播效果--> <!--五张图轮播效果-->
<script type="text/javascript"> <script type="text/javascript">
$(".mouseWheelButtons .carousel").jCarouselLite({ window.onload = function(){
btnNext: " .next", /*导航栏选中样式*/
btnPrev: " .prev", GetRequest();
mouseWheel: true,
circular: true,
speed: 1000,
visible: 5,
scroll: 5
});
/* window.onload = function(){ /*多图片滚动效果*/
var n= $("#activeCarousel>ul>li").length; var lis=$(".cooperation>ul>li");
alert(n); var n= lis.length;
if(n<=5){ var liNum=0;
$(".mouseWheelButtons .carousel").jCarouselLite({ for(var i=0;i<n;i++){
var liNum= lis.eq(i).find("li").size();
var next= "#next"+ i;
var prev= "#prev"+i;
if(liNum<=5){
$(".prev").eq(i).css("display","none");
$(".next").eq(i).css("display","none");
$("#activeCarousel"+i).jCarouselLite({
circular: true, circular: true,
speed: 1000, speed: 800,
visible: 5, visible:liNum
scroll: 5
}); });
}else{ }else{
$(".mouseWheelButtons .carousel").jCarouselLite({ $("#activeCarousel"+i).jCarouselLite({
*//* btnNext: " .next", btnNext:next,
btnPrev: " .prev",*//* btnPrev:prev,
mouseWheel: true, mouseWheel: true,
circular: true, circular: true,
speed: 1000, speed: 800,
visible: 5, visible: 5,
scroll: 5 scroll: 5
}); });
} }
}*/ }
}
</script> </script>
<script> <script>
/*案例模块放大效果*/ /*案例模块放大效果*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment