Merge branch 'feature/banner-auto' into release/newProduct
Showing
4 changed files
with
124 additions
and
9 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', true); | 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', true); | 65 | + $('.img-slider-wrapper').slider2({autoplay: true}); |
67 | } | 66 | } |
public/js/common/center-slider.js
0 → 100644
1 | +/** | ||
2 | + * (品牌优选)图片幻灯片插件 | ||
3 | + * @author: wangqing(robin.wang@yoho.cn) | ||
4 | + * @date: 205/7/2 | ||
5 | + */ | ||
6 | +(function($) { | ||
7 | + $.fn.slider2 = function(options) { | ||
8 | + function autoplayrecycle(index, limit, toright) { | ||
9 | + window.setTimeout(autoplay, $.fn.slider2.defaults.delaytime, index, limit, toright);// eslint-disable-line | ||
10 | + } | ||
11 | + | ||
12 | + function autoplay(index, limit, toright) { | ||
13 | + if (toright === true) { | ||
14 | + $('.img-brand-switch .next').trigger('click'); | ||
15 | + if (index === (limit - 3)) { | ||
16 | + autoplayrecycle(--index, limit, false); | ||
17 | + } else { | ||
18 | + autoplayrecycle(++index, limit, true); | ||
19 | + } | ||
20 | + } else { | ||
21 | + $('.img-brand-switch .prev').trigger('click'); | ||
22 | + if (index === 0) { | ||
23 | + autoplayrecycle(++index, limit, true); | ||
24 | + } else { | ||
25 | + autoplayrecycle(--index, limit, false); | ||
26 | + } | ||
27 | + } | ||
28 | + } | ||
29 | + | ||
30 | + function changePic(index, width, callback) { | ||
31 | + var offersetleft = -(index * width); | ||
32 | + | ||
33 | + $('.img-list') | ||
34 | + .animate({ | ||
35 | + 'margin-left': offersetleft + 'px' | ||
36 | + }, 'slow', callback); | ||
37 | + | ||
38 | + } | ||
39 | + $.fn.slider2.defaults = { | ||
40 | + index: 0, | ||
41 | + shownum: 3, | ||
42 | + autoplay: false, | ||
43 | + delaytime: 3000 | ||
44 | + }; | ||
45 | + return this.each(function() { | ||
46 | + var opts = $.extend({}, $.fn.slider2.defaults, options); | ||
47 | + var mr = parseInt($('.img-item').css('margin-right'), 10); | ||
48 | + var $banneritems = $('.img-item'); | ||
49 | + var bannerarr = []; | ||
50 | + var _width = $banneritems.outerWidth() + mr, | ||
51 | + _size = $banneritems.length, | ||
52 | + j = 0; | ||
53 | + | ||
54 | + if (_size <= 3) { | ||
55 | + $(this).find('.img-brand-switch').hide(); | ||
56 | + return; | ||
57 | + } | ||
58 | + for (j = 0; j < $banneritems.length; j++) { | ||
59 | + bannerarr.push($banneritems[j]); | ||
60 | + } | ||
61 | + _size = bannerarr.length; | ||
62 | + $(this).find('.img-list').css({ | ||
63 | + width: (_width * _size) | ||
64 | + }); | ||
65 | + $(this).find('.next').on('click', function(e) { | ||
66 | + var i = 0, | ||
67 | + _obj = null; | ||
68 | + | ||
69 | + e.preventDefault(); | ||
70 | + | ||
71 | + changePic(3, _width, function() { | ||
72 | + for (i = 0; i < 3; i++) { | ||
73 | + _obj = bannerarr.shift(); | ||
74 | + | ||
75 | + $('.img-item').parent().append(_obj.outerHTML); | ||
76 | + bannerarr.push(_obj); | ||
77 | + } | ||
78 | + $('.img-item').first().remove(); | ||
79 | + $('.img-item').first().remove(); | ||
80 | + $('.img-item').first().remove(); | ||
81 | + $('.img-list').css({ | ||
82 | + 'margin-left': '0' | ||
83 | + }); | ||
84 | + }); | ||
85 | + }); | ||
86 | + $(this).find('.prev').on('click', function(e) { | ||
87 | + var i = 0, | ||
88 | + _obj = null, | ||
89 | + offersetleft = ''; | ||
90 | + | ||
91 | + e.preventDefault(); | ||
92 | + for (i = 0; i < 3; i++) { | ||
93 | + _obj = bannerarr.pop(); | ||
94 | + | ||
95 | + $('.img-item').parent().prepend(_obj.outerHTML); | ||
96 | + bannerarr.unshift(_obj); | ||
97 | + } | ||
98 | + offersetleft = 3 * _width; | ||
99 | + $('.img-item').last().remove(); | ||
100 | + $('.img-item').last().remove(); | ||
101 | + $('.img-item').last().remove(); | ||
102 | + $('.img-list').css({ | ||
103 | + 'margin-left': -offersetleft + 'px' | ||
104 | + }); | ||
105 | + changePic(0, _width); | ||
106 | + }); | ||
107 | + if (opts.autoplay === true) { | ||
108 | + autoplayrecycle(opts.index, _size, true); | ||
109 | + } | ||
110 | + }); | ||
111 | + | ||
112 | + }; | ||
113 | + | ||
114 | +}($)); |
-
Please register or login to post a comment