jquery: 列表輪播完善（整塊輪播&單個輪播）

阿新 • • 發佈：2020-11-06

// 列表整塊輪播
(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: '', //右輪播按鈕選擇器
                showItemCount: 5, //顯示輪播個數
                arrowDisClass: '', // 置灰按鈕，不可點選
            }
            $.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); // 必須設定item的width樣式才生效
            opt.stepWidth = opt.itemWidth * opt.showItemCount;
            opt.moveCondition = opt.itemWidth * (1 - opt.showItemCount);
            opt.pointItemWidth = (1 - this.getTotalPage()) * opt.stepWidth;

            _this._initListWith();

            if (opt.arrowDisClass) {
                this._setArrowClass(); // 按鈕不隱藏，通過disable按鈕控制
            } else {
                this._showArrow(); // 當沒有足夠輪播項不顯示按鈕
            }

            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);
        },
        _setArrowClass() {
            let opt = this.opt;
            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);
            }
        },
        _showArrow() {
            let opt = this.opt;
            if (opt.totalItemCount > opt.showItemCount) {
                this.$left.show();
                this.$right.show();
            } else {
                this.$left.hide();
                this.$right.hide();
            }
        },
        _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;
        }
    })
})(jQuery);

// 列表單個輪播
(function ($) {
    FCZX.globalNamespace('FCZX.SwitchUnit');

    FCZX.SwitchUnit = function (opt) {
        this._init(opt)
    }

    $.extend(FCZX.SwitchUnit.prototype, {
        _init: function (opt) {
            let _this = this;
            _this.opt = {
                listSelector: '', //輪播列表選擇器
                itemSelector: '', //輪播列表項選擇器
                leftSelector: '', //左輪播按鈕選擇器
                rightSelector: '', //右輪播按鈕選擇器
                showItemCount: 5, //顯示輪播個數
                arrowDisClass: '', // 置灰按鈕，不可點選
            }
            $.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.$leftArrow = $(_opt.leftSelector);
            this.$rightArrow = $(_opt.rightSelector);

            _opt.totalItemCount = this.$item.length;
            _opt.itemWidth = this.$item.outerWidth(true);
            this.index = 0;
            this.movableLen = _opt.totalItemCount - _opt.showItemCount

            this.$leftArrow.off('click.switch').on('click.switch', function () {
                _this._movePrev();
            });

            this.$rightArrow.off('click.switch').on('click.switch', function () {
                _this._moveNext();
            });
        },
        _movePrev: function () {
            let _this = this;
            let _opt = _this.opt;
            if (_this.index > 0) {
                _this.index--;
                let itemLeft = parseInt(_this.$list.css('left'));
                let newItemLeft = itemLeft + _opt.itemWidth;
                _this.$list.animate({ left: `${newItemLeft}px` }, 300);
            } else {
                _this.index = _this.movableLen
                _this.$list.animate({ left: -`${_this.movableLen * _opt.itemWidth}` }, 300);
            }
        },
        _moveNext: function () {
            let _this = this;
            let _opt = _this.opt;
            if (_this.index < _this.movableLen) {
                _this.index++;
                let itemLeft = parseInt(_this.$list.css('left'));
                let newItemLeft = itemLeft - _opt.itemWidth;
                _this.$list.animate({ left: `${newItemLeft}px` }, 300);
            } else {
                _this.index = 0
                _this.$list.animate({ left: 0 }, 300);
            }
        }
    })
})(jQuery);

頁面結構：

<div class="home-agent box-content mt30">
        <div class="center-header">
            <div class="center-line"></div>
            <div class="center-title">
                <h2>經紀人</h2>
                <p class="label">REAL ESTATE RANKING</p>
            </div>
        </div>
        <div class="agent-show mt10">
            <a href="javascript:;" class="iconfont left" id="arrowLeft">&#xe685;</a>
            <div class="agent-content">
                <ul class="agent-list clearfix">
                    <li class="agent-item">
                        <a href="">
                            <p class="agent-image">
                                <img src="" alt="">
                            </p>
                            <p class="agent-name">德鄰地產瑞達名郡店</p>
                            <p class="agent-user">郭經理start</p>
                        </a>
                    </li>
                    <li class="agent-item">
                        <a href="">
                            <p class="agent-image">
                                <img src="" alt="">
                            </p>
                            <p class="agent-name">德鄰地產瑞達名郡店</p>
                            <p class="agent-user">郭經理</p>
                        </a>
                    </li>
                    <li class="agent-item">
                        <a href="">
                            <p class="agent-image">
                                <img src="" alt="">
                            </p>
                            <p class="agent-name">德鄰地產瑞達名郡店</p>
                            <p class="agent-user">郭經理</p>
                        </a>
                    </li>
                    <li class="agent-item">
                        <a href="">
                            <p class="agent-image">
                                <img src="" alt="">
                            </p>
                            <p class="agent-name">德鄰地產瑞達名郡店</p>
                            <p class="agent-user">郭經理</p>
                        </a>
                    </li>
                    <li class="agent-item">
                        <a href="">
                            <p class="agent-image">
                                <img src="" alt="">
                            </p>
                            <p class="agent-name">德鄰地產瑞達名郡店</p>
                            <p class="agent-user">郭經理</p>
                        </a>
                    </li>
                    <li class="agent-item">
                        <a href="">
                            <p class="agent-image">
                                <img src="" alt="">
                            </p>
                            <p class="agent-name">德鄰地產瑞達名郡店</p>
                            <p class="agent-user">郭經理</p>
                        </a>
                    </li>
                    
                </ul>
            </div>
            <a href="javascript:;" class="iconfont right" id="arrowRight">&#xe688;</a>
        </div>
    </div>