jquery: 实现整块轮播位移
(function (win) { function CustomCarousel(params) { this._init(params) } $.extend(CustomCarousel.prototype, { _init: function (params) { let _this = this; _this.params = { listSelector: '', //轮播列表选择器 leftSelector: '', //左轮播按钮选择器 rightSelector: '', //右轮播按钮选择器 itemWith: 0, //每个轮播的宽度 stepWith: 0, //每次轮播步长 pointItemWidth: 0, //轮播判断点 showItemCount: 5, //显示轮播个数 totalItemCount: 0, //轮播总个数 isMoveOver: true, //是否完成位移 initHiddenArrow: true, //左右按钮(初始化)是否显示 } $.extend(true, _this.params, params || {}); _this._initDomEvent(); _this._initListWith(); return _this; }, _initDomEvent: function () { let _this = this; let params = this.params; this.$list = $(params.listSelector); this.$left = $(params.leftSelector); this.$right = $(params.rightSelector); //默认整块轮播 if (params.pointItemWidth === 0) { params.pointItemWidth = (1 - this.getTotalPage(params)) * params.stepWith; } if (params.initHiddenArrow) { this._showArrow(params); } this.$left.click(function () { if (params.isMoveOver) { _this._movePrev(params); } }); this.$right.click(function () { if (params.isMoveOver) { _this._moveNext(params); } }); }, _initListWith: function () { let params = this.params; this.$list.css('width', `${(params.totalItemCount + 1) * params.itemWith}px`); }, _showArrow: function (params) { let _this = this; //如果总的轮播个数大于显示的轮播个数就显示arrow if (params.totalItemCount > params.showItemCount) { _this.$left.show(); _this.$right.show(); } else { _this.$left.hide(); _this.$right.hide(); } }, _movePrev: function (params) { let _this = this; let $list = _this.$list; let itemLeft = parseFloat($list.css('left')); if (itemLeft === 0) { $list.css('left', `${params.pointItemWidth}px`); } else { params.isMoveOver = false; let newItemLeft = itemLeft + params.stepWith; $list.animate({ left: `${newItemLeft}px` }, 300, _this.resetMoveOver(params)) } return _this; }, _moveNext: function (params) { let _this = this; let $list = _this.$list; let itemLeft = parseFloat($list.css('left')); if (itemLeft === params.pointItemWidth) { $list.css('left', 0); } else { params.isMoveOver = false; let newItemLeft = itemLeft - params.stepWith; $list.animate({ left: `${newItemLeft}px` }, 300, _this.resetMoveOver(params)) } return _this; }, resetMoveOver: function (params) { params.isMoveOver = true; }, getTotalPage: function (params) { let totalPage = 0; totalPage = Math.ceil(params.totalItemCount / params.showItemCount); return totalPage; } }) win.CustomCarousel = CustomCarousel; })(window)