Skip to content

Q
qsl_web
Commit 136d31a4 by 邓丽
Options

scroller

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