fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 24ba4b09b28364641168eb6cd58cc9f4444fb374 1 parent 21bd7754

星潮教室首页明星头像

Inline Side-by-side
Showing 4 changed files with 75 additions and 19 deletions
... ... @@ -68,23 +68,47 @@ exports.index = (req, res) => {
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/0142677eb1abf7bf7b233524f604d71fd6.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/0142677eb1abf7bf7b233524f604d71fd6.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/0142677eb1abf7bf7b233524f604d71fd6.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/0142677eb1abf7bf7b233524f604d71fd6.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/0142677eb1abf7bf7b233524f604d71fd6.png?imageView/2/w/{width}/h/{height}'
},
{
url: '',
src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
}
]
}));
... ...
... ... @@ -7,19 +7,30 @@
{{> resources/banner-top}}
{{/if}}
{{/content}}
<div class="star-avatar">
<div class="avatar-swiper swiper-container">
<ul class="swiper-wrapper">
{{#each starAvatar}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{image src 180 180}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/each}}
</ul>
</div>
</div>
{{!-- <div class="avatar-swiper swiper-container">
<ul class="swiper-wrapper">
{{#each starAvatar}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{image src 180 180}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/each}}
</ul>
</div> --}}
<div class="avatar-swiper">
<ul class="clearfix swiper-wrapper">
{{# starAvatar}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{image src 180 180}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/ starAvatar}}
</ul>
</div>
</div>
... ...
... ... @@ -25,11 +25,14 @@ if ($('.banner-swiper .swiper-slide').length > 1) {
if ($('.avatar-swiper .swiper-slide').length > 1) {
new Swiper('.avatar-swiper', {
loop: true,
initialSlide: 3,
centeredSlides: true,
lazyLoading: true,
lazyLoadingInPrevNext: true,
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li',
slidesOffsetBefore: '-' + $('.avatar-swiper').find('li').not('.swiper-slide-visible').width() / 2,
watchSlidesProgress: true,
watchSlidesVisibility: true
});
}
... ...
... ... @@ -102,18 +102,36 @@
}
}
.star-avatar {
.avatar-swiper {
overflow: hidden;
margin-top: 30px;
li {
float: left;
margin-left: 20px;
width: auto;
width: 110px;
height: 110px;
margin: 34px 10px 0;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.swiper-slide-active {
width: 180px;
height: 180px;
margin-top: 0;
}
.swiper-slide-prev,
.swiper-slide-next {
width: 130px;
height: 130px;
margin-top: 27px;
}
}
}
... ...