创建全局命名空间
(function () { /** * FCZX.foo.bar */ let FCZX = {}; FCZX.globalNamespace = function (ns) { var nsParts = ns.split("."); var root = window; for (var i = 0; i < nsParts.length; i++) { if (typeof root[nsParts[i]] == "undefined") { root[nsParts[i]] = {}; } root = root[nsParts[i]]; } return root; } window.FCZX = FCZX; })()
定义轮播实例
(function ($) { FCZX.globalNamespace(‘FCZX.Switch‘); FCZX.Switch = function (opt) { this._init(opt) } $.extend(FCZX.Switch.prototype, { isMoveOver: true, //是否完成位移 _init: function (opt) { let _this = this; _this.opt = { listSelector: ‘‘, //轮播列表选择器 itemSelector: ‘‘, //轮播列表项选择器 leftSelector: ‘‘, //左轮播按钮选择器 rightSelector: ‘‘, //右轮播按钮选择器 pointItemWidth: 0, //轮播判断点 showItemCount: 5, //显示轮播个数 arrowDisClass: ‘arrow-disabled‘ } $.extend(true, _this.opt, opt || {}); _this._initDomEvent(); return _this; }, _initDomEvent: function () { let _this = this; let opt = this.opt; this.$list = $(opt.listSelector); this.$item = $(opt.itemSelector); this.$left = $(opt.leftSelector); this.$right = $(opt.rightSelector); opt.totalItemCount = this.$item.length; opt.itemWidth = this.$item.outerWidth(true); opt.stepWidth = opt.itemWidth * opt.showItemCount; _this._initListWith(); if (opt.totalItemCount <= opt.showItemCount) { this.$left.addClass(opt.arrowDisClass); this.$right.addClass(opt.arrowDisClass); } else { this.$left.removeClass(opt.arrowDisClass); this.$right.removeClass(opt.arrowDisClass); } //默认整块轮播 if (opt.pointItemWidth === 0) { opt.pointItemWidth = (1 - this.getTotalPage(opt.totalItemCount)) * opt.stepWidth; } this.$left.off(‘click.switch‘).on(‘click.switch‘, function () { if (_this.$left.hasClass(opt.arrowDisClass)) return; if (!_this.isMoveOver) return; _this.isMoveOver = false; _this._movePrev(opt); }); this.$right.off(‘click.switch‘).on(‘click.switch‘, function () { if (_this.$right.hasClass(opt.arrowDisClass)) return; if (!_this.isMoveOver) return; _this.isMoveOver = false; _this._moveNext(opt); }); }, _initListWith: function () { let opt = this.opt; this.$list.css(‘width‘, opt.itemWidth * opt.totalItemCount); }, _initListLeft: function () { this.$list.css(‘left‘, 0); }, _movePrev: function (opt) { let _this = this; let $list = _this.$list; let itemLeft = parseInt($list.css(‘left‘)); if (itemLeft === 0) { $list.animate({ left: `${opt.pointItemWidth}px` }, 300, function () { _this.isMoveOver = true; }); } else { let newItemLeft = itemLeft + opt.stepWidth; $list.animate({ left: `${newItemLeft}px` }, 300, function () { _this.isMoveOver = true; }); } return _this; }, _moveNext: function (opt) { let _this = this; let $list = _this.$list; let itemLeft = parseInt($list.css(‘left‘)); if (itemLeft === opt.pointItemWidth) { $list.animate({ left: 0 }, 300, function () { _this.isMoveOver = true; }); } else { let newItemLeft = itemLeft - opt.stepWidth; $list.animate({ left: `${newItemLeft}px` }, 300, function () { _this.isMoveOver = true; }); } return _this; }, getTotalPage: function () { let totalPage = 0; let opt = this.opt; totalPage = Math.ceil(opt.totalItemCount / opt.showItemCount); return totalPage; }, // movePosition: function () { // // 子元素与直接上级元素的距离 // let itemPosition = targetItem.position().left; // //计算当前页 // let currentPage = Math.floor(itemPosition / stepWidth); // let relativePosition = listContentParent.offset().left - targetItem.offset().left; // // 计算可视范围内相对偏移量 // if (relativePosition < moveCondition || relativePosition > 0) { // listContent.css(‘left‘, `-${currentPage * stepWidth}px`); // } // } }) })(jQuery);