262 lines
9.5 KiB
JavaScript
262 lines
9.5 KiB
JavaScript
(function () {
|
||
|
||
// 默认参数
|
||
// slideChangeTransitionStart【完成】
|
||
// slideTo【完成】
|
||
var defaultConf = {
|
||
reverse: false,
|
||
timer: '', // 保存自动播放的定时器
|
||
ParentElement: '.swiper-container',
|
||
config: {
|
||
loop: false, // 是否开启循环播放【完成】
|
||
time: 1, // 自动播放的间隔事件【完成】
|
||
speed: 500, // 切换轮播图时候用的时间【完成】
|
||
grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
|
||
initialSlide: 0, // 默认显示第一个【完成】
|
||
auto: false, // 是否开启自动播放【完成】
|
||
},
|
||
// 小圆点的父标签选择器名称
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next', // 下一页
|
||
prevEl: '.swiper-button-prev', // 上一页
|
||
},
|
||
}
|
||
|
||
/**
|
||
* 构造函数
|
||
* @param {*} ParentElement 父节点的选择器名称
|
||
* @param {*} Configuration 插件的自定义设置项
|
||
*/
|
||
function Swiper(ParentElement, Configuration) {
|
||
defaultConf.ParentElement = ParentElement || defaultConf.ParentElement;
|
||
defaultConf.config.loop = Configuration.loop || defaultConf.config.loop;
|
||
defaultConf.config.time = Configuration.time || defaultConf.config.time;
|
||
defaultConf.config.speed = Configuration.speed || defaultConf.config.speed;
|
||
defaultConf.config.grabCursor = Configuration.grabCursor || defaultConf.config.grabCursor;
|
||
defaultConf.config.initialSlide = Configuration.initialSlide || defaultConf.config.initialSlide;
|
||
defaultConf.config.auto = Configuration.auto || defaultConf.config.auto;
|
||
console.log(Configuration);
|
||
this.slideArr = this._(".swiper-wrapper .swiper-slide");
|
||
|
||
// 最外层 swiper-container 宽度
|
||
this.f = this.$(defaultConf.ParentElement).offsetWidth;
|
||
|
||
// 判断小圆点
|
||
if (Configuration.hasOwnProperty("pagination")) {
|
||
defaultConf.pagination.el = Configuration.pagination.el;
|
||
this.RenderDot()
|
||
}
|
||
|
||
// 判断使用自定义前进后退按钮
|
||
if (Configuration.hasOwnProperty("navigation")) {
|
||
this.RenderNavigation()
|
||
//判断下一页按钮的名称是否自定义
|
||
if (Configuration.navigation.hasOwnProperty("nextEl")) {
|
||
defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
|
||
}
|
||
//判断上一页按钮的名称是否自定义
|
||
if (Configuration.navigation.hasOwnProperty("prevEl")) {
|
||
defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
|
||
}
|
||
}
|
||
|
||
this.UserConfig = Configuration
|
||
this.init()
|
||
}
|
||
|
||
|
||
// 类的方法
|
||
Swiper.prototype = {
|
||
init: function () {
|
||
this.SetWrapperWidth();
|
||
defaultConf.config.auto ? this.AutoPlay() : '';
|
||
this.initSwiperSlide()
|
||
},
|
||
// 设置swiper-slide父类的宽度
|
||
SetWrapperWidth: function () {
|
||
|
||
// 计算swiper-slide的宽度
|
||
this.slideArr.forEach(v => v.style.width = `${this.f}px`)
|
||
this.$(".swiper-wrapper").style = `
|
||
width: ${this.f * this.slideArr.length}px;
|
||
left: -${this.f * defaultConf.config.initialSlide}px;
|
||
transition: all ease ${defaultConf.config.speed / 1000}s;
|
||
cursor: ${defaultConf.config.grabCursor ? 'pointer' : ''} ;
|
||
`
|
||
},
|
||
|
||
/**
|
||
* 注册移动端滑动
|
||
*/
|
||
initSwiperSlide: function() {
|
||
var fa = this.$(defaultConf.ParentElement),
|
||
startX = 0;
|
||
|
||
fa.addEventListener('touchstart', function(e) {
|
||
startX = e.targetTouches[0].pageX
|
||
console.log("开始下标：", startX);
|
||
})
|
||
|
||
// fa.addEventListener("touchmove",(e) => {
|
||
// var x = e.changedTouches[0].pageX;
|
||
// console.log(e.changedTouches[0].pageX);
|
||
// this.$(".swiper-wrapper").style.left = `${-(x)}px`
|
||
// })
|
||
|
||
fa.addEventListener('touchend', (e) => {
|
||
console.log();
|
||
var endX = e.changedTouches[0].pageX
|
||
console.log("结束下标：", endX);
|
||
// 左滑
|
||
if (endX < startX) {
|
||
console.log("左滑");
|
||
this.animation(-this.f)
|
||
} else {
|
||
console.log("右滑");
|
||
this.animation(this.f)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 生成小圆点
|
||
RenderDot: function () {
|
||
this.slideArr.forEach((v, i) => {
|
||
this.$(defaultConf.pagination.el).innerHTML +=
|
||
`
|
||
<div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
|
||
`
|
||
});
|
||
|
||
var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
|
||
Dot.forEach((v, i) => {
|
||
v.onclick = () => {
|
||
this.UserConfig.pagination && this.ChangeDotActive(i)
|
||
this.$(".swiper-wrapper").style.left = `-${i * this.f}px`;
|
||
}
|
||
})
|
||
},
|
||
|
||
// 渲染左右前进后退按钮
|
||
RenderNavigation: function () {
|
||
var prev = this.$(defaultConf.navigation.prevEl);
|
||
var next = this.$(defaultConf.navigation.nextEl);
|
||
prev.innerText = "<";
|
||
next.innerText = ">";
|
||
this.BindNavigationClick(prev, next)
|
||
},
|
||
|
||
// 为上一页下一页按钮绑定切换事件
|
||
BindNavigationClick() {
|
||
// var a = this
|
||
// 下一页
|
||
this.$(defaultConf.navigation.nextEl).onclick = () => {
|
||
this.animation(-this.f)
|
||
this.UserConfig.pagination && this.ChangeDotActive()
|
||
}
|
||
// 上一页
|
||
this.$(defaultConf.navigation.prevEl).onclick = () => {
|
||
this.animation(this.f)
|
||
this.UserConfig.pagination && this.ChangeDotActive()
|
||
}
|
||
},
|
||
|
||
// 切换动画
|
||
animation(offset) {
|
||
var swiperWrapper = this.$(".swiper-wrapper");
|
||
var y = parseInt(swiperWrapper.style.left) + offset,
|
||
max = -(this.f * (this.slideArr.length - 1));
|
||
|
||
// 如果时最后一张图
|
||
if (y < max) {
|
||
console.log("如果时最后一张图");
|
||
if (defaultConf.config.loop) {
|
||
swiperWrapper.style.left = "0px";
|
||
} else if (defaultConf.config.auto) {
|
||
defaultConf.reverse = true
|
||
this.animation(this.f)
|
||
}
|
||
return;
|
||
|
||
// 判断是不是第一张图
|
||
} else if (y > 0) {
|
||
if (defaultConf.config.loop == false && defaultConf.config.auto) {
|
||
defaultConf.reverse = false
|
||
swiperWrapper.style.left = `${y - this.f*2}px`
|
||
}
|
||
if (defaultConf.config.loop) {
|
||
swiperWrapper.style.left = `${max}px`
|
||
}
|
||
return
|
||
} else {
|
||
if (defaultConf.config.loop == false
|
||
&& defaultConf.config.auto
|
||
&& defaultConf.reverse) {
|
||
swiperWrapper.style.left = `${y}px`
|
||
} else {
|
||
swiperWrapper.style.left = `${y}px`
|
||
}
|
||
|
||
}
|
||
},
|
||
|
||
ChangeDotActive(type = null) {
|
||
var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
|
||
var index = "";
|
||
if (type == null) {
|
||
var TotalLeft = Math.abs(parseInt(this.$(".swiper-wrapper").style.left));
|
||
index = TotalLeft / this.f;
|
||
} else {
|
||
index = type;
|
||
}
|
||
|
||
// 实现调用用户传入的方法，返回下标给用户
|
||
this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
|
||
|
||
// 清除所有的激活样式
|
||
Dot.forEach(val => val.className = "swiper-dot");
|
||
// 为你点击的li加激活样式
|
||
Dot[index].className = "swiper-dot swiper-active";
|
||
},
|
||
|
||
AutoPlay() {
|
||
defaultConf.timer = setInterval(() => {
|
||
if (defaultConf.config.loop == false
|
||
&& defaultConf.config.auto
|
||
&& defaultConf.reverse) {
|
||
this.animation(this.f)
|
||
} else {
|
||
this.animation(-this.f)
|
||
}
|
||
this.UserConfig.pagination && this.ChangeDotActive()
|
||
}, defaultConf.config.time * 1000)
|
||
|
||
this.$(defaultConf.ParentElement).onmouseover = function () {
|
||
clearInterval(defaultConf.timer)
|
||
}
|
||
|
||
this.$(defaultConf.ParentElement).onmouseout = () => {
|
||
this.AutoPlay()
|
||
}
|
||
},
|
||
|
||
// 通过js调用此方法，实现轮播图的切换
|
||
slideTo(index) {
|
||
this.$(".swiper-wrapper").style.left = `-${index * this.f}px`;
|
||
this.UserConfig.pagination && this.ChangeDotActive()
|
||
},
|
||
$: function (className) {
|
||
return document.querySelector(className)
|
||
},
|
||
_: function (className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
}
|
||
|
||
|
||
window.swiper = Swiper
|
||
|
||
|
||
})() |