311 lines
10 KiB
JavaScript
311 lines
10 KiB
JavaScript
// 保护
|
||
(function () {
|
||
|
||
// 类的构造函数
|
||
function swiper (el,option) {
|
||
this.defaultOption = {
|
||
el: '.swiper',
|
||
width () {
|
||
return $(this.el).clientWidth
|
||
},
|
||
timer: null,
|
||
time: 3000,
|
||
initialSlide: 0,
|
||
direction: 'vertical',
|
||
speed: 800,
|
||
grabCursor: false,
|
||
loop: false,
|
||
autoplay: false,
|
||
swiperWrapper: '.swiper-wrapper',
|
||
on: {
|
||
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
},
|
||
// 如果需要前进后退按钮
|
||
navigation: {
|
||
nextEl: '.next',
|
||
prevEl: '.prev',
|
||
},
|
||
// 事件控制中心，主要保存事件的
|
||
eventList: {}
|
||
}
|
||
|
||
if (typeof el == "string") {
|
||
|
||
this.defaultOption.el = el || this.defaultOption.el;
|
||
this.defaultOption.time = option.time || this.defaultOption.time;
|
||
this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
|
||
this.defaultOption.direction = option.direction || this.defaultOption.direction;
|
||
this.defaultOption.speed = option.speed || this.defaultOption.speed;
|
||
this.defaultOption.grabCursor = option.grabCursor || this.defaultOption.grabCursor;
|
||
this.defaultOption.loop = option.loop || this.defaultOption.loop;
|
||
this.defaultOption.autoplay = option.autoplay || this.defaultOption.autoplay;
|
||
this.defaultOption.swiperWrapper = option.swiperWrapper || this.defaultOption.swiperWrapper;
|
||
|
||
if (option.hasOwnProperty("pagination")) {
|
||
this.defaultOption.pagination.el = option.pagination.el || this.defaultOption.pagination.el;
|
||
}
|
||
|
||
if (option.hasOwnProperty("navigation")) {
|
||
this.defaultOption.navigation.nextEl = option.navigation.nextEl || this.defaultOption.navigation.nextEl;
|
||
this.defaultOption.navigation.prevEl = option.navigation.prevEl || this.defaultOption.navigation.prevEl;
|
||
}
|
||
|
||
if (option.hasOwnProperty("on")) {
|
||
for (const key in option.on) {
|
||
this.defaultOption.on[key] = option.on[key]
|
||
}
|
||
}
|
||
|
||
|
||
this.next = $(this.defaultOption.navigation.nextEl);
|
||
this.wrapper = $(this.defaultOption.swiperWrapper);
|
||
|
||
this.prev = $(this.defaultOption.navigation.prevEl);
|
||
this.pagination = $(this.defaultOption.pagination.el);
|
||
this.el = $(this.defaultOption.el);
|
||
|
||
this.init();
|
||
|
||
} else {
|
||
throw new Error("最外层父节点的类名必传")
|
||
}
|
||
}
|
||
|
||
// 类的方法
|
||
swiper.prototype = {
|
||
init () {
|
||
this.CreatedPagination();
|
||
this.setInitialSlide();
|
||
this.setGrabCursor();
|
||
|
||
if (this.defaultOption.autoplay) {
|
||
this.autoPlay();
|
||
this.el.onmouseover = () => clearInterval(this.defaultOption.timer);
|
||
this.el.onmouseout = () => this.autoPlay();
|
||
}
|
||
|
||
this.nextClick();
|
||
this.prevClick();
|
||
|
||
this.initSwiperSlide();
|
||
},
|
||
/**
|
||
* 注册移动端滑动
|
||
*/
|
||
initSwiperSlide: function () {
|
||
var fa = this.el,
|
||
startX = 0,
|
||
startY = 0;
|
||
|
||
fa.addEventListener('touchstart', function (e) {
|
||
e.stopPropagation()
|
||
startX = e.targetTouches[0].pageX
|
||
startY = e.targetTouches[0].pageY
|
||
})
|
||
|
||
var getDirection = function (startx, starty, endx, endy) {
|
||
// 获得角度
|
||
var getAngle = function(angx, angy) {
|
||
return Math.atan2(angy, angx) * 180 / Math.PI;
|
||
};
|
||
|
||
var angx = endx - startx;
|
||
var angy = endy - starty;
|
||
var result = 0;
|
||
|
||
// 如果滑动距离太短
|
||
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
|
||
return result;
|
||
}
|
||
|
||
var angle = getAngle(angx, angy);
|
||
if (angle >= -135 && angle <= -45) {
|
||
result = 1;
|
||
} else if (angle > 45 && angle < 135) {
|
||
result = 2;
|
||
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
|
||
result = 3;
|
||
} else if (angle >= -45 && angle <= 45) {
|
||
result = 4;
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
fa.addEventListener('touchmove', (e) => {
|
||
e.stopPropagation()
|
||
var endX = e.changedTouches[0].pageX;
|
||
var endY = e.changedTouches[0].pageY;
|
||
|
||
var direction = getDirection(startX, startY, endX, endY);
|
||
// if (direction == 3 || direction == 4) {
|
||
// var x = parseInt(endX - startX) - 40
|
||
// // this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
|
||
// }
|
||
});
|
||
|
||
fa.addEventListener('touchend', (e) => {
|
||
e.stopPropagation()
|
||
var endX = e.changedTouches[0].pageX;
|
||
var endY = e.changedTouches[0].pageY;
|
||
|
||
var direction = getDirection(startX, startY, endX, endY);
|
||
|
||
switch (direction) {
|
||
case 0:
|
||
console.log("未滑动！");
|
||
break;
|
||
case 1:
|
||
console.log("向上！")
|
||
break;
|
||
case 2:
|
||
console.log("向下！")
|
||
break;
|
||
case 3:
|
||
console.log("向左！")
|
||
this.setSpeed();
|
||
this.animation(-this.defaultOption.width())
|
||
break;
|
||
case 4:
|
||
console.log("向右滑动");
|
||
this.setSpeed();
|
||
this.animation(this.defaultOption.width())
|
||
break;
|
||
default:
|
||
}
|
||
})
|
||
},
|
||
setInitialSlide() {
|
||
if (this.defaultOption.initialSlide != 0) {
|
||
this.changePagination(this.defaultOption.initialSlide)
|
||
}
|
||
},
|
||
setGrabCursor() {
|
||
this.defaultOption.grabCursor ? this.wrapper.style.cursor = "pointer" : ""
|
||
},
|
||
setSpeed() {
|
||
this.wrapper.style.transition = `all ease ${this.defaultOption.speed / 1000}s`;
|
||
},
|
||
nextClick() {
|
||
// this 指向
|
||
// var test = this;
|
||
// 1：保存this
|
||
// 2: =>
|
||
// 3: a().bind(this)
|
||
this.next != null ? this.next.onclick = () => {
|
||
this.setSpeed();
|
||
this.animation(-this.defaultOption.width())
|
||
} : ''
|
||
},
|
||
prevClick() {
|
||
this.prev != null ? this.prev.onclick = () => {
|
||
this.setSpeed();
|
||
this.animation(this.defaultOption.width())
|
||
} : ''
|
||
},
|
||
slideTo(index) {
|
||
this.setSpeed();
|
||
this.changePagination(index)
|
||
},
|
||
on (eventType,event) {
|
||
this.defaultOption.eventList[eventType] = event;
|
||
},
|
||
CreatedPagination() {
|
||
if (this.pagination != null) {
|
||
Array.from(this.wrapper.children).forEach((v,i) => {
|
||
this.pagination.innerHTML += ` <li class="${i == 0 ? 'active' : ''}"></li>`
|
||
});
|
||
this.BindPaginationClick();
|
||
}
|
||
},
|
||
BindPaginationClick() {
|
||
Array.from(this.pagination.children).forEach((v,i) => {
|
||
v.onclick = () => {
|
||
this.setSpeed();
|
||
this.changePagination(i)
|
||
}
|
||
})
|
||
},
|
||
changePagination(i) {
|
||
this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(i);
|
||
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i);
|
||
if (this.pagination != null) {
|
||
Array.from(this.pagination.children).forEach((item) => {
|
||
item.className = ""
|
||
});
|
||
Array.from(this.pagination.children)[i].className = "active";
|
||
}
|
||
this.wrapper.style.transform = `translateX(${i * -this.defaultOption.width()}px)`;
|
||
},
|
||
|
||
animation(offset) {
|
||
var val = parseInt(this.wrapper.style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
|
||
var newOffset = offset + val;
|
||
var maxWidth = -(this.wrapper.children.length - 1) * this.defaultOption.width();
|
||
|
||
if (newOffset > 0) {
|
||
if (this.defaultOption.loop) {
|
||
newOffset = maxWidth;
|
||
} else {
|
||
newOffset = 0
|
||
}
|
||
}
|
||
|
||
if (newOffset < maxWidth) {
|
||
if (this.defaultOption.loop) {
|
||
newOffset = 0;
|
||
} else {
|
||
newOffset = maxWidth
|
||
}
|
||
}
|
||
|
||
var index = Math.abs(newOffset / this.defaultOption.width());
|
||
this.changePagination(index);
|
||
|
||
this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(index);
|
||
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(index)
|
||
},
|
||
autoPlay () {
|
||
this.defaultOption.timer = setInterval(() => {
|
||
this.animation(-this.defaultOption.width())
|
||
}, this.defaultOption.time);
|
||
}
|
||
}
|
||
|
||
function $(className) {
|
||
var newClassName = className.split(" ");
|
||
if (newClassName.length > 1) {
|
||
var father = newClassName[newClassName.length - 2];
|
||
var childrenList = document.querySelector(father).children;
|
||
|
||
var arr = Array.from(childrenList).filter(function (el){
|
||
if (
|
||
el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
|
||
||
|
||
el.tagName.toLowerCase() == newClassName[newClassName.length-1]
|
||
) {
|
||
return el;
|
||
}
|
||
});
|
||
|
||
if (arr.length > 1) {
|
||
return document.querySelectorAll(className)
|
||
} else if (arr.length == 1){
|
||
return document.querySelector(className)
|
||
} else {
|
||
throw new Error(`${className} 不存在，请检查`)
|
||
}
|
||
|
||
} else {
|
||
return document.querySelector(newClassName);
|
||
|
||
}
|
||
}
|
||
|
||
window.Swiper = swiper;
|
||
|
||
})()
|