245 lines
6.7 KiB
JavaScript
245 lines
6.7 KiB
JavaScript
// 自执行（匿名）函数
|
||
(function () {
|
||
// 默认参数
|
||
var defaultOption = {
|
||
time: 3,
|
||
imgClick: function () {
|
||
|
||
}
|
||
};
|
||
|
||
var DomEle = {
|
||
main: null,
|
||
Dot: null,
|
||
Pic: null,
|
||
Action: null,
|
||
LeftAction: null,
|
||
RightAction: null,
|
||
ImgWidth: 0,
|
||
AutoPlay: null,
|
||
};
|
||
|
||
function swiper (Option) {
|
||
if (Option.hasOwnProperty("el") && document.querySelector(Option.el) !== null) {
|
||
if (Option.hasOwnProperty("data") && Option.data.length !== 0) {
|
||
// 可选参数的合并
|
||
Object.assign(defaultOption, Option)
|
||
this.init()
|
||
|
||
} else {
|
||
console.error(`data未传，或是data数组为空，请检查`)
|
||
}
|
||
} else {
|
||
console.error(`el未传，或是类名${Option.el}不存在，请检查`)
|
||
}
|
||
}
|
||
|
||
swiper.prototype = {
|
||
init: function () {
|
||
console.log("检查工作已经结束，开始绘制轮播图")
|
||
// 创建dom，追加到网页上
|
||
this.CreatedMain();
|
||
this.CreatedPic();
|
||
this.CreatedYd();
|
||
|
||
document.querySelector(defaultOption.el).appendChild(DomEle.main);
|
||
|
||
if (defaultOption.isAction) {
|
||
this.CreatedAction()
|
||
this.BindRightClick();
|
||
this.BindLeftClick();
|
||
}
|
||
this.BindClickYdLi();
|
||
this.BindOnmouseover();
|
||
this.BindOnmouseout();
|
||
this.Auto();
|
||
},
|
||
|
||
/**
|
||
* 绑定左边按钮的点击事件
|
||
* @constructor
|
||
*/
|
||
BindLeftClick() {
|
||
DomEle.LeftAction.onclick = () => this.change(DomEle.ImgWidth)
|
||
},
|
||
|
||
/**
|
||
* 绑定右边按钮的点击事件
|
||
* @constructor
|
||
*/
|
||
BindRightClick: function () {
|
||
// var dd = this;
|
||
DomEle.RightAction.onclick = () => this.change(-DomEle.ImgWidth)
|
||
},
|
||
|
||
BindClickYdLi() {
|
||
var self = this;
|
||
DomEle.Dot.childNodes.forEach(function (v,ix){
|
||
v.onclick = function () {
|
||
self.ClearActive()
|
||
this.className = "active"
|
||
var left = ix * -DomEle.ImgWidth;
|
||
DomEle.Pic.style.left = `${left}px`
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 鼠标悬停
|
||
* @constructor
|
||
*/
|
||
BindOnmouseover() {
|
||
DomEle.main.onmouseover = function () {
|
||
clearInterval(DomEle.AutoPlay)
|
||
}
|
||
},
|
||
|
||
/**
|
||
*
|
||
* @constructor
|
||
*/
|
||
BindOnmouseout() {
|
||
DomEle.main.onmouseout = () => {
|
||
this.Auto()
|
||
}
|
||
},
|
||
|
||
Auto() {
|
||
DomEle.AutoPlay = setInterval(() => {
|
||
this.change(-DomEle.ImgWidth)
|
||
}, defaultOption.time * 1000);
|
||
},
|
||
|
||
/**
|
||
* 主要动画过渡
|
||
* @param off number 传入的偏移距离
|
||
*/
|
||
change: function (off) {
|
||
var oldLeft = parseInt(DomEle.Pic.style.left);
|
||
var newLeft = oldLeft + (off);
|
||
var index = parseInt(`${(newLeft / -DomEle.ImgWidth)}`);
|
||
|
||
if (newLeft > 0) {
|
||
newLeft = -( (defaultOption.data.length-1) * DomEle.ImgWidth )
|
||
index = 2
|
||
}
|
||
|
||
if (newLeft < -( (defaultOption.data.length-1) * DomEle.ImgWidth )) {
|
||
newLeft = 0;
|
||
index = 0
|
||
}
|
||
|
||
this.ClearActive()
|
||
DomEle.Dot.childNodes[index].className = "active";
|
||
DomEle.Pic.style.left = `${newLeft}px`
|
||
},
|
||
|
||
ClearActive() {
|
||
DomEle.Dot.childNodes.forEach(function (a,b){
|
||
a.className = ""
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 创建最外层父节点main
|
||
* @constructor
|
||
*/
|
||
CreatedMain: function () {
|
||
DomEle.main = document.createElement("div")
|
||
DomEle.main.className = "main";
|
||
},
|
||
|
||
/**
|
||
* 图片父节点
|
||
* @constructor
|
||
*/
|
||
CreatedPic: function () {
|
||
DomEle.Pic = document.createElement("ul");
|
||
DomEle.Pic.className = "pic";
|
||
DomEle.Pic.style.left = "0px"
|
||
defaultOption.data.forEach((val,index)=> {
|
||
DomEle.Pic.innerHTML += `
|
||
<li>
|
||
${
|
||
val.hasOwnProperty("href")
|
||
? `<a href="${val.href}" target="_blank"><img src="${val.img}"></a>`
|
||
: `<img src="${val.img}" >`
|
||
}
|
||
</li>
|
||
`
|
||
});
|
||
if (defaultOption.data[0].hasOwnProperty("href")) {
|
||
DomEle.ImgWidth = DomEle.Pic.children[0].children[0].children[0].width;
|
||
} else {
|
||
DomEle.ImgWidth = DomEle.Pic.children[0].children[0].width;
|
||
DomEle.Pic.querySelectorAll("li").forEach((val,index)=> {
|
||
val.onclick = function () {
|
||
defaultOption.imgClick(val,index)
|
||
}
|
||
})
|
||
}
|
||
|
||
DomEle.main.appendChild(DomEle.Pic)
|
||
},
|
||
|
||
/**
|
||
* 左右翻页按钮父节点
|
||
* @constructor
|
||
*/
|
||
CreatedAction: function () {
|
||
DomEle.Action = document.createElement("div");
|
||
DomEle.LeftAction = document.createElement("div");
|
||
DomEle.RightAction = document.createElement("div");
|
||
|
||
DomEle.Action.className = "action";
|
||
DomEle.LeftAction.className = "left";
|
||
DomEle.RightAction.className = "right";
|
||
|
||
DomEle.LeftAction.innerText = "<";
|
||
DomEle.RightAction.innerText = ">";
|
||
|
||
|
||
DomEle.Action.appendChild(DomEle.LeftAction)
|
||
DomEle.Action.appendChild(DomEle.RightAction)
|
||
|
||
DomEle.main.appendChild(DomEle.Action)
|
||
|
||
},
|
||
|
||
/**
|
||
* 小圆点的父节点
|
||
* @constructor
|
||
*/
|
||
CreatedYd: function () {
|
||
DomEle.Dot = document.createElement("ul");
|
||
DomEle.Dot.className = "yd";
|
||
|
||
defaultOption.data.forEach((val,index)=> {
|
||
DomEle.Dot.innerHTML += `<li class="${ index == 0 ? 'active': '' }"></li>`
|
||
});
|
||
DomEle.main.appendChild(DomEle.Dot)
|
||
},
|
||
}
|
||
|
||
|
||
window.Swiper = swiper
|
||
})()
|
||
|
||
// function data() {
|
||
// var name = "ddd"
|
||
// console.log(name)
|
||
// console.log(this.name)
|
||
// }
|
||
//
|
||
// data.prototype.name = "dddd"
|
||
//
|
||
// new data()
|
||
|
||
// class data {
|
||
// constructor() {
|
||
//
|
||
// }
|
||
//
|
||
// }
|
||
//
|
||
// new data()
|