fe / yohobuy-node · Commits

Go to a project

Authored by 周少峰
Commit ba52182c8464012b2b15af6064e8430ea2001102 2 parents 21ed9237 fd22850f

Merge branch 'release/newProduct'

Inline Side-by-side
Showing 9 changed files with 177 additions and 16 deletions
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 {{# imgBrand}} 4 {{# imgBrand}}
5 <li class="img-item"> 5 <li class="img-item">
6 <a href="{{url}}" target= "_blank"> 6 <a href="{{url}}" target= "_blank">
7 - <img class="lazy" data-original="{{image src 378 175}}" alt=""> 7 + <img data-original="{{image src 378 175}}" src="{{image src 378 175}}" alt="">
8 </a> 8 </a>
9 </li> 9 </li>
10 {{/ imgBrand}} 10 {{/ imgBrand}}
@@ -8,7 +8,9 @@ @@ -8,7 +8,9 @@
8 <ul class="img-list"> 8 <ul class="img-list">
9 {{# imgBrand}} 9 {{# imgBrand}}
10 <li class="img-item"> 10 <li class="img-item">
11 - <a href="{{url}}" target= "_blank"> <img class="lazy" data-original="{{image src 320 430}}" alt="{{alt}}"></a> 11 + <a href="{{url}}" target= "_blank">
  12 + <img data-original="{{image src 320 430}}" src="{{image src 320 430}}" alt="{{alt}}">
  13 + </a>
12 </li> 14 </li>
13 {{/ imgBrand}} 15 {{/ imgBrand}}
14 </ul> 16 </ul>
@@ -4,10 +4,7 @@ @@ -4,10 +4,7 @@
4 * @date: 2015/11/23 4 * @date: 2015/11/23
5 */ 5 */
6 6
7 -var $ = require('yoho-jquery'),  
8 - lazyLoad = require('yoho-jquery-lazyload');  
9 -  
10 -var imageBrand = require('./img-brand'); 7 +var $ = require('yoho-jquery');
11 8
12 var homePage = $('.home-page').data('page'), 9 var homePage = $('.home-page').data('page'),
13 brandUrl = $('.logo-brand').data('url'); 10 brandUrl = $('.logo-brand').data('url');
@@ -19,6 +16,8 @@ require('../product/index/logo-brand'); @@ -19,6 +16,8 @@ require('../product/index/logo-brand');
19 16
20 require('../plugins/accordion'); 17 require('../plugins/accordion');
21 18
  19 +require('../common/center-slider');
  20 +
22 $(document).on('mouseenter', '.imgopacity a img', function() { 21 $(document).on('mouseenter', '.imgopacity a img', function() {
23 $(this).css('opacity', 0.8); // eslint-disable-line 22 $(this).css('opacity', 0.8); // eslint-disable-line
24 }); 23 });
@@ -42,7 +41,7 @@ if ($.inArray(homePage, ['boys', 'girls', 'kids', 'lifestyle']) > -1) { @@ -42,7 +41,7 @@ if ($.inArray(homePage, ['boys', 'girls', 'kids', 'lifestyle']) > -1) {
42 41
43 42
44 43
45 -lazyLoad($('img.lazy')); 44 +// lazyLoad($('img.lazy'));
46 if (homePage === 'boys') { 45 if (homePage === 'boys') {
47 $('.slide-container').slider({ 46 $('.slide-container').slider({
48 pagination: '.thumb-pagination' 47 pagination: '.thumb-pagination'
@@ -57,11 +56,11 @@ if (homePage === 'boys') { @@ -57,11 +56,11 @@ if (homePage === 'boys') {
57 url: brandUrl 56 url: brandUrl
58 }); 57 });
59 58
60 - imageBrand.init('.img-brand'); 59 + $('.img-brand').slider2({autoplay: true});
61 } else { 60 } else {
62 $('.logo-brand').logoBrand({ 61 $('.logo-brand').logoBrand({
63 showNum: 10, 62 showNum: 10,
64 url: brandUrl 63 url: brandUrl
65 }); 64 });
66 - imageBrand.init('.img-slider-wrapper'); 65 + $('.img-slider-wrapper').slider2({autoplay: true});
67 } 66 }
@@ -3,7 +3,7 @@ var $ = require('yoho-jquery'), @@ -3,7 +3,7 @@ var $ = require('yoho-jquery'),
3 3
4 require('yoho-slider'); 4 require('yoho-slider');
5 5
6 -exports.init = function(selector) { 6 +exports.init = function(selector, isAuto) {
7 var $imgBrand = $(selector); 7 var $imgBrand = $(selector);
8 var slider = $imgBrand.unslider({ 8 var slider = $imgBrand.unslider({
9 delay: 5000, 9 delay: 5000,
@@ -12,6 +12,7 @@ exports.init = function(selector) { @@ -12,6 +12,7 @@ exports.init = function(selector) {
12 }); 12 });
13 var imgBrandNum = $imgBrand.find('li').length; 13 var imgBrandNum = $imgBrand.find('li').length;
14 var cols = imgBrandNum / 3; 14 var cols = imgBrandNum / 3;
  15 + var timer;
15 16
16 if (!($imgBrand.find('li').length % 3)) { 17 if (!($imgBrand.find('li').length % 3)) {
17 cols -= 1; 18 cols -= 1;
@@ -46,4 +47,23 @@ exports.init = function(selector) { @@ -46,4 +47,23 @@ exports.init = function(selector) {
46 slider.unslider('next'); 47 slider.unslider('next');
47 } 48 }
48 }); 49 });
  50 +
  51 + function autoSlider() {
  52 + timer = setInterval(function() {
  53 + if (slider.data('unslider').current >= cols) {
  54 + slider.unslider('animate:first');
  55 + } else {
  56 + slider.unslider('next');
  57 + }
  58 + }, 2000);
  59 + }
  60 +
  61 + if (isAuto) {
  62 + autoSlider();
  63 + $imgBrand.hover(function() {
  64 + clearInterval(timer);
  65 + }, function() {
  66 + autoSlider();
  67 + });
  68 + }
49 }; 69 };
  1 +/**
  2 + * (品牌优选)图片幻灯片插件
  3 + * @author: wangqing(robin.wang@yoho.cn)
  4 + * @date: 205/7/2
  5 + */
  6 +(function($) {
  7 + $.fn.slider2 = function(options) {
  8 + var timer;
  9 +
  10 + function autoplayrecycle(index, limit, toright) {
  11 + window.setTimeout(autoplay, $.fn.slider2.defaults.delaytime, index, limit, toright);// eslint-disable-line
  12 + }
  13 +
  14 + function autoplay(index, limit, toright) {
  15 + if (toright === true) {
  16 + $('.img-brand-switch .next').trigger('click');
  17 + if (index === (limit - 3)) {
  18 + autoplayrecycle(--index, limit, false);
  19 + } else {
  20 + autoplayrecycle(++index, limit, true);
  21 + }
  22 + } else {
  23 + $('.img-brand-switch .prev').trigger('click');
  24 + if (index === 0) {
  25 + autoplayrecycle(++index, limit, true);
  26 + } else {
  27 + autoplayrecycle(--index, limit, false);
  28 + }
  29 + }
  30 + }
  31 +
  32 + function autoClickNext(dom) {
  33 + var delaytime = 'delaytime' in options ? options.delaytime :
  34 + $.fn.slider2.defaults.delaytime;
  35 +
  36 + timer = setInterval(function() {
  37 + dom.find('.next').click();
  38 + }, delaytime);
  39 + }
  40 +
  41 + function changePic(index, width, callback) {
  42 + var offersetleft = -(index * width);
  43 +
  44 + $('.img-list')
  45 + .animate({
  46 + 'margin-left': offersetleft + 'px'
  47 + }, 'slow', callback);
  48 +
  49 + }
  50 + $.fn.slider2.defaults = {
  51 + index: 0,
  52 + shownum: 3,
  53 + autoplay: false,
  54 + delaytime: 3000
  55 + };
  56 + return this.each(function() {
  57 + var opts = $.extend({}, $.fn.slider2.defaults, options);
  58 + var mr = parseInt($('.img-item').css('margin-right'), 10);
  59 + var $banneritems = $('.img-item');
  60 + var bannerarr = [];
  61 + var _width = $banneritems.outerWidth() + mr,
  62 + _size = $banneritems.length,
  63 + j = 0;
  64 +
  65 + if (_size <= 3) {
  66 + $(this).find('.img-brand-switch').hide();
  67 + return;
  68 + }
  69 + for (j = 0; j < $banneritems.length; j++) {
  70 + bannerarr.push($banneritems[j]);
  71 + }
  72 + _size = bannerarr.length;
  73 + $(this).find('.img-list').css({
  74 + width: (_width * _size)
  75 + });
  76 + $(this).find('.next').on('click', function(e) {
  77 + var i = 0,
  78 + _obj = null;
  79 +
  80 + e.preventDefault();
  81 +
  82 + changePic(3, _width, function() {
  83 + for (i = 0; i < 3; i++) {
  84 + _obj = bannerarr.shift();
  85 +
  86 + $('.img-item').parent().append(_obj.outerHTML);
  87 + bannerarr.push(_obj);
  88 + }
  89 + $('.img-item').first().remove();
  90 + $('.img-item').first().remove();
  91 + $('.img-item').first().remove();
  92 + $('.img-list').css({
  93 + 'margin-left': '0'
  94 + });
  95 + });
  96 + });
  97 + $(this).find('.prev').on('click', function(e) {
  98 + var i = 0,
  99 + _obj = null,
  100 + offersetleft = '';
  101 +
  102 + e.preventDefault();
  103 + for (i = 0; i < 3; i++) {
  104 + _obj = bannerarr.pop();
  105 +
  106 + $('.img-item').parent().prepend(_obj.outerHTML);
  107 + bannerarr.unshift(_obj);
  108 + }
  109 + offersetleft = 3 * _width;
  110 + $('.img-item').last().remove();
  111 + $('.img-item').last().remove();
  112 + $('.img-item').last().remove();
  113 + $('.img-list').css({
  114 + 'margin-left': -offersetleft + 'px'
  115 + });
  116 + changePic(0, _width);
  117 + });
  118 + if (opts.autoplay === true) {
  119 + // autoplayrecycle(opts.index, _size, true);
  120 + autoClickNext($(this));
  121 + $(this).hover(function() {
  122 + clearInterval(timer);
  123 + }, function() {
  124 + autoClickNext($(this));
  125 + });
  126 + }
  127 + });
  128 +
  129 + };
  130 +
  131 +}($));
@@ -92,7 +92,11 @@ @@ -92,7 +92,11 @@
92 } 92 }
93 93
94 .new-festival-tag { 94 .new-festival-tag {
95 - background: #000; 95 + width: 72px;
  96 + text-align: center;
  97 + background-image: resolve("product/newPro-icon.png");
  98 + color: #000;
  99 + padding: 0;
96 } 100 }
97 101
98 .yep-tag, 102 .yep-tag,
@@ -982,6 +986,7 @@ @@ -982,6 +986,7 @@
982 986
983 .service { 987 .service {
984 $service: product/service.png; 988 $service: product/service.png;
  989 +
985 width: width($service); 990 width: width($service);
986 height: height($service); 991 height: height($service);
987 margin: 45px auto; 992 margin: 45px auto;
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 text-align: center; 36 text-align: center;
37 top: 0; 37 top: 0;
38 position: absolute; 38 position: absolute;
39 - background: resolve('product/sale-out-bg.png'); 39 + background: resolve("product/sale-out-bg.png");
40 } 40 }
41 41
42 .sale-out-tip { 42 .sale-out-tip {
@@ -44,7 +44,7 @@ @@ -44,7 +44,7 @@
44 height: 110px; 44 height: 110px;
45 margin-top: 105px; 45 margin-top: 105px;
46 display: inline-block; 46 display: inline-block;
47 - background: resolve('product/sale-out-tip.png') no-repeat center center; 47 + background: resolve("product/sale-out-tip.png") no-repeat center center;
48 text-indent: -9999px; 48 text-indent: -9999px;
49 } 49 }
50 } 50 }
@@ -85,10 +85,9 @@ @@ -85,10 +85,9 @@
85 font-size: 12px; 85 font-size: 12px;
86 color: #fff; 86 color: #fff;
87 padding: 0 6px 0 16px; 87 padding: 0 6px 0 16px;
88 - background: resolve('product/discount-tag.png') no-repeat; 88 + background: resolve("product/discount-tag.png") no-repeat;
89 display: inline-block; 89 display: inline-block;
90 } 90 }
91 -  
92 } 91 }
93 92
94 .col-btn { 93 .col-btn {
@@ -131,7 +130,11 @@ @@ -131,7 +130,11 @@
131 } 130 }
132 131
133 .new-festival-tag { 132 .new-festival-tag {
134 - background: #000; 133 + width: 72px;
  134 + text-align: center;
  135 + background-image: resolve("product/newPro-icon.png");
  136 + color: #000;
  137 + padding: 0;
135 } 138 }
136 139
137 .yep-tag, 140 .yep-tag,
@@ -151,6 +154,7 @@ @@ -151,6 +154,7 @@
151 from { 154 from {
152 max-width: 0; 155 max-width: 0;
153 } 156 }
  157 +
154 to { 158 to {
155 max-width: 150px; 159 max-width: 150px;
156 } 160 }