/**
* @desc 灏佽杞挱鍥剧粍浠
* @author: Demigodliu
* @date: 2020/06/13 09:44
**/
(function(){
let _swiper = {
containerWidth: 0, // 杞挱瀹瑰櫒瀹藉害
itemLength: 0, // 瀛愰」涓暟
itemTotalWidth: 0, // 瀛愰」鎬诲
nowItemIndex: 0, // 褰撳墠瀛愰」
speed: 5000, // 瀛愰」鍒囨崲閫熷害
prevAndNextBtnGroup: false, // 鏄惁闇€瑕佸墠鍚庢寜閽粍
pagination: false, // 鏄惁闇€瑕佸垎椤靛櫒
renderFlag: false, // 鍒囨崲瀛愰」鑺傛祦闃叉姈寮€鍏
autoTimer: null, // 鑷姩鎾斁鐨勫畾鏃跺櫒
/**
* @desc 鍒濆鍖
* @author: Demigodliu
* @date: 2020/06/13 09:46
**/
init(){
// 鎺ユ敹鐢ㄦ埛鐨勮嚜瀹氫箟鍙傛暟閰嶇疆
if(typeof swiperConfig !== "undefined"){
let { width, height, speed, needPrevAndNextBtnGroup, needPagination } = swiperConfig;
console.log(width);
$(".swiper-container").css({ "width": (+width || 800) + 'px', "height": (+height || 300) + 'px' });
this.speed = speed || 5000;
this.prevAndNextBtnGroup = needPrevAndNextBtnGroup || false;
this.pagination = needPagination || false;
}
// 鍒濆鍖栬疆鎾
this.initSwiperInfo();
if(this.prevAndNextBtnGroup){ this.initPrevAndNextClickFn(); }
if(this.pagination){ this.initPagination(); }
this.autoCarousel();
},
/**
* @desc 鍒濆鍖栫敤鎴峰~鍏呭瓙椤圭殑淇℃伅
* @author: Demigodliu
* @date: 2020/06/13 09:50
**/
initSwiperInfo(){
let _container = $(".swiper-container"),
_containerWidth = _container.width(),
_itemLength = $(".swiper-item").length,
_itemTotalWidth = _containerWidth * _itemLength;
this.containerWidth = _containerWidth;
this.itemLength = _itemLength;
this.itemTotalWidth = _itemTotalWidth;
console.log(_containerWidth);
// 瀛愰」鍒濆鍖栦綅缃
let _item = $(".swiper-item");
for(let i = 0; i < _itemLength; i++){
_item.eq(i).css("left", _containerWidth * i);
}
},
/**
* @desc 鍒濆鍖栧墠杩涘悗閫€鎸夐挳缁勪簨浠
* @author: Demigodliu
* @date: 2020/06/13 09:47
**/
initPrevAndNextClickFn(){
$(".swiper-container").append(`
`);
$(".swiper-btn-group_prev").unbind("click").bind("click", () => _swiper.prevItem());
$(".swiper-btn-group_next").unbind("click").bind("click", () => _swiper.nextItem());
},
/**
* @desc 鍒濆鍖栧垎椤靛櫒
* @author: Demigodliu
* @date: 2020/06/13 13:41
**/
initPagination(){
let { itemLength } = this;
$(".swiper-container").append(``);
// 鍒嗛〉鍣ㄦ覆鏌
let _paginationText = '';
for(let i = 0; i < itemLength; i++){
_paginationText += ``;
}
$(".swiper-pagination").html(_paginationText);
$(".swiper-pagination-item").eq(0).addClass("swiper-pagination-item_active");
this.paginationFn();
},
/**
* @desc 鑷姩杞挱
* @author: Demigodliu
* @date: 2020/06/13 11:03
**/
autoCarousel(){
this.autoTimer = setInterval(() => {
this.nextItem();
}, this.speed);
},
/**
* @desc 鍓嶄竴寮
* @author: Demigodliu
* @date: 2020/06/13 09:52
**/
prevItem(){
let { nowItemIndex, itemLength, renderFlag } = this;
// 閬垮厤鐬棿澶氭鎿嶄綔
if(!renderFlag){
this.renderFlag = true;
// 鏆傚仠鑷姩鎾斁
clearInterval(this.autoTimer);
// 鍒ゆ柇鏄惁鏄疆鎾竟鐣
this.nowItemIndex = !nowItemIndex ? itemLength - 1 : --nowItemIndex;
// 杞挱鏇存柊
this.render()
}
},
/**
* @desc 鍚庝竴寮
* @author: Demigodliu
* @date: 2020/06/13 09:52
**/
nextItem(){
let { nowItemIndex, itemLength, renderFlag } = this;
// 閬垮厤鐬棿澶氭鎿嶄綔
if(!renderFlag){
this.renderFlag = true;
// 鏆傚仠鑷姩鎾斁
clearInterval(this.autoTimer);
// 鍒ゆ柇鏄惁鏄疆鎾竟鐣
this.nowItemIndex = nowItemIndex === itemLength - 1 ? 0 : ++nowItemIndex;
// 杞挱鏇存柊
this.render()
}
},
/**
* @desc 鍒嗛〉鍣ㄧ偣鍑
* @author: Demigodliu
* @date: 2020/06/13 13:14
**/
paginationFn(){
let that = this;
$(".swiper-pagination-item").unbind("click").bind("click", function(){
let idx = $(this).index();
if(!that.renderFlag){
that.renderFlag = true;
that.nowItemIndex = idx;
// 鏆傚仠鑷姩鎾斁
clearInterval(that.autoTimer);
that.render();
}
});
},
/**
* @desc 娓叉煋杞挱
* @author: Demigodliu
* @date: 2020/06/13 09:58
**/
render(){
let { containerWidth, nowItemIndex } = this;
// 鎵ц閲嶇粯
$(".swiper-wrapper").css("left", -containerWidth * nowItemIndex);
// 鍒嗛〉鍣ㄥ悓姝
$(".swiper-pagination-item").removeClass("swiper-pagination-item_active").eq(nowItemIndex).addClass("swiper-pagination-item_active");
setTimeout(() => {
this.renderFlag = false;
// 鎭㈠鑷姩鎾斁
this.autoCarousel();
}, 500);
}
};
$(() => _swiper.init());
}());