jquery: 列表轮播优化

创建全局命名空间

(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);