add slider.js

+/**
+ * 首页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">&#xe609;</span></a>' +
+                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe608;</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
+    };
+}($));