|
|
|
/**
|
|
|
|
* 首页banner轮播
|
|
|
|
* @author: liuyue(yue.liu@yoho.cn)
|
|
|
|
* @date: 2015/12/04
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
lazyLoad = require('yoho-jquery-lazyload');
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
var Slider = function(element, options) {
|
|
|
|
this.$element = $(element);
|
|
|
|
this.options = $.extend({}, $.fn.slider.defaults, options);
|
|
|
|
this.bigItem = this.$element.find('.slide-wrapper').find('li');
|
|
|
|
this.smallItem = null;
|
|
|
|
this.len = this.bigItem.size();
|
|
|
|
this.index = 0;
|
|
|
|
this.timer = null;
|
|
|
|
this.init();
|
|
|
|
};
|
|
|
|
|
|
|
|
Slider.prototype = {
|
|
|
|
init: function() {
|
|
|
|
if (!this.$element) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.len <= 1) {
|
|
|
|
lazyLoad(this.$element.find('img.lazy'));
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.options.pagination) {
|
|
|
|
this.smallItem = $(this.options.pagination).find('li');
|
|
|
|
} else {
|
|
|
|
this._createPage();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.options.orient) {
|
|
|
|
this._createOrient();
|
|
|
|
}
|
|
|
|
this._slideShow();
|
|
|
|
this._bindEvent();
|
|
|
|
this._autoplay();
|
|
|
|
},
|
|
|
|
_createOrient: function() {
|
|
|
|
|
|
|
|
var orientHtml = '<div class="slide-switch">' +
|
|
|
|
'<a class="prev" href="javascript:;"><span class="iconfont"></span></a>' +
|
|
|
|
'<a class="next" href="javascript:;"><span class="iconfont"></span></a>' +
|
|
|
|
'</div>';
|
|
|
|
|
|
|
|
if (this.$element.find('.slide-switch').length > 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$element.append(orientHtml);
|
|
|
|
},
|
|
|
|
_createPage: function() {
|
|
|
|
var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
|
|
|
|
'<div class="slide-shade"></div><div class="slide-pagination-last">',
|
|
|
|
i = 0;
|
|
|
|
|
|
|
|
if (this.len <= 1) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
for (i = 0; i < this.len; i++) {
|
|
|
|
pageHtml += '<span></span>';
|
|
|
|
}
|
|
|
|
pageHtml += '</div></div></div>';
|
|
|
|
this.$element.append($(pageHtml));
|
|
|
|
this.smallItem = this.$element.find('.slide-pagination-inner span');
|
|
|
|
},
|
|
|
|
_bindEvent: function() {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
this.$element.find('.slide-switch').on('click', '.next', function() {
|
|
|
|
that._nextSlide();
|
|
|
|
clearInterval(that.timer);
|
|
|
|
that.timer = setInterval(function() {
|
|
|
|
that._nextSlide();
|
|
|
|
}, that.options.time);
|
|
|
|
}).on('click', '.prev', function() {
|
|
|
|
that._prevSlide();
|
|
|
|
clearInterval(that.timer);
|
|
|
|
that.timer = setInterval(function() {
|
|
|
|
that._nextSlide();
|
|
|
|
}, that.options.time);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.smallItem.on('mouseenter', function() {
|
|
|
|
that.index = $(this).index();
|
|
|
|
clearInterval(that.timer);
|
|
|
|
that._slideShow();
|
|
|
|
}).on('mouseleave', function() {
|
|
|
|
that._autoplay();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$element.on('mouseenter', function() {
|
|
|
|
$(this).find('.slide-switch').addClass('show');
|
|
|
|
}).on('mouseleave', function() {
|
|
|
|
$(this).find('.slide-switch').removeClass('show');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
_nextSlide: function() {
|
|
|
|
if (this.index === this.len - 1) {
|
|
|
|
this.index = 0;
|
|
|
|
} else {
|
|
|
|
this.index++;
|
|
|
|
}
|
|
|
|
this._slideShow();
|
|
|
|
},
|
|
|
|
_prevSlide: function() {
|
|
|
|
if (this.index === 0) {
|
|
|
|
this.index = this.len - 1;
|
|
|
|
} else {
|
|
|
|
this.index--;
|
|
|
|
}
|
|
|
|
this._slideShow();
|
|
|
|
},
|
|
|
|
_slideShow: function() {
|
|
|
|
var $img = this.bigItem.eq(this.index).find('img.lazy');
|
|
|
|
|
|
|
|
// 未加载图片的及时显示
|
|
|
|
if ($img.attr('src') !== $img.data('original')) {
|
|
|
|
lazyLoad($img, {
|
|
|
|
event: 'sporty'
|
|
|
|
});
|
|
|
|
$img.trigger('sporty');
|
|
|
|
}
|
|
|
|
|
|
|
|
this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
|
|
|
|
this.bigItem.eq(this.index).show().stop().animate({
|
|
|
|
opacity: 1
|
|
|
|
}, function() {
|
|
|
|
|
|
|
|
// 修正IE下切换时文字会重叠的问题
|
|
|
|
$(this).find('.slide-tips > p').removeClass('hide');
|
|
|
|
}).siblings().stop().animate({
|
|
|
|
opacity: 0
|
|
|
|
}, function() {
|
|
|
|
$(this).hide().find('.slide-tips > p').addClass('hide');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
_autoplay: function() {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
clearInterval(this.timer);
|
|
|
|
this.timer = setInterval(function() {
|
|
|
|
that._nextSlide();
|
|
|
|
}, this.options.time);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
$.fn.slider = function(option) {
|
|
|
|
return this.each(function() {
|
|
|
|
var $this = $(this),
|
|
|
|
data = $this.data('Slider'),
|
|
|
|
options = typeof option === 'object' && option;
|
|
|
|
|
|
|
|
if (!data) {
|
|
|
|
$this.data('Slider', (data = new Slider(this, options)));
|
|
|
|
}
|
|
|
|
if (typeof option === 'string') {
|
|
|
|
data[option]();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
$.fn.slider.Constructor = Slider;
|
|
|
|
$.fn.slider.defaults = {
|
|
|
|
time: 5000,
|
|
|
|
orient: true, // 左右切换箭头的显示
|
|
|
|
pagination: null
|
|
|
|
};
|
|
|
|
}($)); |
...
|
...
|
|
