Authored by wenjiekong

Merge branch 'feature/banner-auto' into release/newProduct

@@ -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 }
  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 +}($));