Open
Description
如何编写一个模块化组件
以轮播图为例，主要看头和尾
; (function (undefined) {
let currentIndex = 1; // 当前是在第几个
let timer;
const carousal = {
init: function (object) {
const { el, banners, interval } = object;
// banner至少为3个
const length = banners.length;
if (length === 1) {
banners.push(banners[0]);
banners.push(banners[0])
}
if (length === 2) {
banners.push(banners[0]);
}
this._render(el, banners);
timer = setInterval(this._next.bind(this), interval);
this.listenPaginationTouch.apply(this);
},
_render: function (el, banners) {
const imgUl = document.createElement('div');
imgUl.className = 'banner-list';
let imgUlInnerHTML = '';
const paginationBox = document.createElement('div');
paginationBox.className = 'pagination-box';
let paginationBoxInnerHTML = '';
banners.forEach((item, index) => {
imgUlInnerHTML += `<div class="banner-item ${index === 0 ? 'banner-item-prev' : ''} ${index === 1 ? 'banner-item-current' : ''} ${index === 2 ? 'banner-item-next' : ''} ${index > 2 ? 'banner-item-out' : ''}"><img src="${item.imageUrl}"></div>`;
paginationBoxInnerHTML += `<div class="pagination-item index-${index} ${index === currentIndex ? 'active' : ''}"></div>`
});
imgUl.innerHTML = imgUlInnerHTML;
paginationBox.innerHTML = paginationBoxInnerHTML;
el.appendChild(imgUl);
el.appendChild(paginationBox);
},
// 右边的那个图片变成当前的大图
_next: function () {
let bannerList = document.querySelectorAll('.banner-item');
let length = bannerList.length;
currentIndex = (currentIndex + 1) % length;
this._changeNextOrder(currentIndex);
this._renderPagination(currentIndex);
},
// 向右交换顺序
_changeNextOrder: function (_currentIndex) {
let bannerList = document.querySelectorAll('.banner-item');
let length = bannerList.length;
bannerList.forEach((item, index) => {
if (index === _currentIndex) {
item.className = 'banner-item banner-item-current'
} else if (index === ((_currentIndex - 1 + length) % length)) {
item.className = 'banner-item banner-item-prev'
} else if (index === ((_currentIndex + 1) % length)) {
item.className = 'banner-item banner-item-next'
} else {
item.className = 'banner-item banner-item-out'
}
})
},
_renderPagination: function (_currentIndex) {
let paginationList = document.querySelectorAll('.pagination-item');
paginationList.forEach((item, index) => {
if (index === _currentIndex) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
})
},
// 监听小圆点按钮点击
listenPaginationTouch: function () {
let paginationBox = document.querySelector('.pagination-box');
paginationBox.addEventListener('click', (event) => {
const target = event.target;
if (target.classList.contains('pagination-item')) {
try {
let className = target.classList[1];
let index = Number(className.split('-')[1]);
this._changeNextOrder(index);
this._renderPagination(index);
currentIndex = index;
clearInterval(timer);
timer = setInterval(this._next.bind(this), 5000);
} catch (error) {
throw new Error(error);
}
}
})
}
}
let _global = (function () { return this || (0, eval)('this'); }());
if (typeof module !== 'undefined' && module.exports) {
module.exports = carousal;
} else if (typeof define === 'function' && define.amd) {
define(function () { return carousal; });
} else {
!('carousal' in _global) && (_global.carousal = carousal);
}
}())Metadata
Metadata
Assignees
Labels
No labels