208 lines
5.0 KiB
JavaScript
208 lines
5.0 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)
|
||
}
|
||
|
||
}
|
||
|
||
// 为什么要 new
|
||
// x 类的 实例
|
||
// var x = new Swiper(1000);
|
||
// x.test()
|
||
|
||
|
||
// 哪些功能需要自定义？
|
||
// 是否需要自动播放
|
||
// 设置自动播放的时间间隔
|
||
// 可以设置默认显示第几张
|
||
// 如果不写html，就不需要对应的功能
|
||
// 可以js编程控制轮播图滚动到第几张
|
||
// 当轮播图滚动的时候要抛出当前下标
|
||
|
||
|
||
// this 指向
|
||
// 函数执行的时候才能确定this到底指向谁,
|
||
// 实际上this的最终指向的是那个调用它的对象
|
||
// var time = 4000
|
||
|
||
// var a = {
|
||
// time: 2000,
|
||
// b: () => {
|
||
// this.time = 5000;
|
||
// var test = () => {
|
||
// console.log(this.time);
|
||
// }
|
||
|
||
// return test
|
||
// }
|
||
// }
|
||
|
||
// var dddd = a.b()
|
||
// dddd()
|
||
|
||
|
||
// 箭头函数 和 普通函数的区别
|
||
|
||
// 如何改变this 指向？？
|
||
// https://www.runoob.com/w3cnote/js-call-apply-bind.html
|
||
|
||
|
||
|
||
// 继承
|
||
|
||
// class car {
|
||
// color = "red";
|
||
// speed = null;
|
||
// start() {}
|
||
// stop() {}
|
||
// }
|
||
|
||
|
||
// class mtc extends car {
|
||
|
||
// constructor(dddd) {
|
||
// super()
|
||
// this.par = dddd
|
||
// console.log(this.par);
|
||
// }
|
||
|
||
// size() {
|
||
// console.log("摩托车很小：",this.color);
|
||
// }
|
||
// }
|
||
|
||
|
||
// class jhc extends car {
|
||
// rescue() {
|
||
// console.log("救人");
|
||
// }
|
||
// }
|
||
|
||
// var mt = new mtc("1")
|
||
// // mt.size()
|