149 lines
4.5 KiB
JavaScript
149 lines
4.5 KiB
JavaScript
// 哪些功能需要自定义？
|
||
// 是否需要自动播放
|
||
// 设置自动播放的时间间隔
|
||
// 可以设置默认显示第几张
|
||
// 如果不写html，就不需要对应的功能
|
||
// 可以js编程控制轮播图滚动到第几张
|
||
// 当轮播图滚动的时候要抛出当前下标
|
||
|
||
class Swiper {
|
||
//设置默认选项
|
||
defaultOption = {
|
||
TimeId: null,
|
||
autoPlay: false,
|
||
time: 100,
|
||
initialSlide: 0,
|
||
el: '.swiper',
|
||
on: {},
|
||
// length: () => {
|
||
// //获取li标签的长度
|
||
// console.log(this._f(".banner_ul li").length);
|
||
// return this._f(".banner_ul li").length
|
||
|
||
// }
|
||
|
||
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.next()
|
||
this.prev()
|
||
this.sport()
|
||
this.click()
|
||
}
|
||
next() {
|
||
//var xxx = this; 保存this指向
|
||
|
||
//当前this属于next()
|
||
this.click(".button_right", (v, i) => {
|
||
//console.log(this);
|
||
//console.log(v,i);
|
||
this.sport(1)
|
||
})
|
||
}
|
||
prev() {
|
||
this.click(".button_left", (v, i) => {
|
||
//console.log(v,i);
|
||
this.sport(-1)
|
||
})
|
||
}
|
||
|
||
|
||
click(className, callback) {
|
||
//this._f(className).forEach((v,i) => v.onclick = () => callback(v,i))
|
||
//批量绑定点击事件
|
||
this._f(className).forEach((v, i) => {
|
||
v.onclick = () => {
|
||
// console.log("s");
|
||
//把数据回传出去 v,i
|
||
callback(v, i)
|
||
}
|
||
})
|
||
}
|
||
slideTo(index) {
|
||
this.changeActive(index)
|
||
}
|
||
//移动
|
||
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.changeActive(this.defaultOption.initialSlide)
|
||
}
|
||
}
|
||
//todo 图片添加了active 但是没有删掉上一次的active
|
||
|
||
changeActive(i) {
|
||
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)
|
||
|
||
if(this.$f(".banner_dot") != null){
|
||
this._f(".banner_dot i").forEach(val => {
|
||
val.classList.remove("active")
|
||
})
|
||
this._f(".banner_dot i")[i].classList.add("active")
|
||
}
|
||
|
||
// this.$f(".banner_dot").style.left = `${i * -this.defaultOption.width()}px`
|
||
|
||
// this._f(".banner_dot i").forEach(val => {
|
||
// console.log(this._f(".banner_dot i"));
|
||
// val.classList.remove("avtive")
|
||
// })
|
||
// this._f(".banner_dot i")[i].classList.add("active");
|
||
// console.log( this._(".banner_dot i")[i]);
|
||
}
|
||
|
||
renderOot(){
|
||
for (var i = 0; i<this.defaultOption.length(); i++ ){
|
||
this.$f(".banner_dot").innerHTML +=`
|
||
<li class="${i == this.defaultOption.initialSlide ? 'active' : ''}"></li>
|
||
|
||
`
|
||
}
|
||
this.click(".banner_dot i",(v,i) => this.changeActive(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);
|
||
}
|
||
} |