129 lines
3.5 KiB
JavaScript
129 lines
3.5 KiB
JavaScript
|
|
|
|
class Swiper {
|
|
|
|
defaultOption = {
|
|
TimeId: null,
|
|
autoPlay: false,
|
|
time: 1000,
|
|
initialSlide: 0, // 实现了
|
|
el: '.swiper',
|
|
on: {},
|
|
length: () => this._f(`.swiper_wrap li`).length,
|
|
width: () => this.$f(``).offsetWidth,
|
|
initSlideLeft: () => {
|
|
this.$f(".swiper_wrap").style.left = `${this.defaultOption.initialSlide * -this.defaultOption.width()
|
|
}px`
|
|
}
|
|
}
|
|
|
|
// 构造函数里面接受
|
|
constructor(el, option) {
|
|
|
|
if (el.length == 0 || this.$(el) == null) {
|
|
console.error(`类名:${el}不存在，请检查`);
|
|
} else {
|
|
this.defaultOption.el = el || this.defaultOption.el;
|
|
this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay;
|
|
this.defaultOption.time = option.time || this.defaultOption.time;
|
|
this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
|
|
if (option.hasOwnProperty("on")) {
|
|
this.defaultOption.on = option.on
|
|
}
|
|
this.init()
|
|
}
|
|
|
|
}
|
|
|
|
init() {
|
|
this.defaultOption.initSlideLeft()
|
|
if (this.$f(".button") != null) {
|
|
this.next()
|
|
this.prev()
|
|
}
|
|
|
|
this.defaultOption.autoPlay
|
|
? this.autoPlay()
|
|
: ''
|
|
|
|
this.$f(".dot") == null ? '' : this.renderDot()
|
|
|
|
}
|
|
|
|
next() {
|
|
this.click(".right", (v) => this.sport(1))
|
|
}
|
|
|
|
prev() {
|
|
this.click(".left", v => this.sport(-1))
|
|
}
|
|
|
|
|
|
changeDotActive(i) {
|
|
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)
|
|
|
|
if (this.$f(".dot") != null) {
|
|
this._f(".dot li").forEach(val => val.classList.remove("active"))
|
|
this._f(".dot li")[i].classList.add("active")
|
|
}
|
|
this.$f(".swiper_wrap").style.left = `${i * -this.defaultOption.width()}px`
|
|
}
|
|
|
|
renderDot() {
|
|
for (var i = 0; i < this.defaultOption.length(); i++) {
|
|
this.$f(".dot").innerHTML += `
|
|
<li class="${i == this.defaultOption.initialSlide ? 'active' : ''}"></li>
|
|
`
|
|
}
|
|
this.click(".dot li", (v, i) => this.changeDotActive(i))
|
|
}
|
|
|
|
autoPlay() {
|
|
this.defaultOption.TimeId = setInterval(() => this.sport(1), this.defaultOption.time)
|
|
this.$f("").onmouseover = () => clearInterval(this.defaultOption.TimeId)
|
|
this.$f("").onmouseout = () => this.autoPlay()
|
|
}
|
|
|
|
sport(offset) {
|
|
this.defaultOption.initialSlide += offset
|
|
|
|
if (this.defaultOption.initialSlide < 0) {
|
|
this.defaultOption.initialSlide = 0
|
|
}
|
|
if (this.defaultOption.initialSlide > this.defaultOption.length() - 1) {
|
|
this.defaultOption.initialSlide = this.defaultOption.length() - 1
|
|
}
|
|
if (this.defaultOption.initialSlide >= 0 && this.defaultOption.initialSlide <= this.defaultOption.length() - 1) {
|
|
this.changeDotActive(this.defaultOption.initialSlide)
|
|
}
|
|
}
|
|
|
|
slideTo(index) {
|
|
this.changeDotActive(index)
|
|
}
|
|
|
|
click(className, callback) {
|
|
this._f(className).forEach((v, i) => v.onclick = () => callback(v, i))
|
|
}
|
|
|
|
|
|
|
|
$f(className) {
|
|
return this.$(`${this.defaultOption.el} ${className}`)
|
|
}
|
|
|
|
_f(className) {
|
|
return this._(`${this.defaultOption.el} ${className}`)
|
|
}
|
|
|
|
|
|
|
|
$(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
_(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
|
|
} |