/** * 首页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 }; }($));