176 lines
5.1 KiB
JavaScript
176 lines
5.1 KiB
JavaScript
// js 封装插件
|
||
// 给浏览器使用（前端）window
|
||
// 给nodejs 服务端使用的（后端）
|
||
|
||
// 自执行函数
|
||
|
||
|
||
|
||
// 自执行函数，形成局部作用域
|
||
(function (win) {
|
||
|
||
|
||
var defaultSetting = {
|
||
time: 3,
|
||
containerClassName: '.container',
|
||
NavigationClassName: '.navigation',
|
||
next: '.next',
|
||
previous: '.prev',
|
||
autoPlay: false,
|
||
data: [],
|
||
imgWidth: 0
|
||
}
|
||
|
||
// es5 构造函数
|
||
// 主要做 变量的保存和校验
|
||
function LunBo(setting) {
|
||
|
||
defaultSetting.time = setting.time || defaultSetting.time
|
||
defaultSetting.containerClassName = setting.containerClassName || defaultSetting.containerClassName
|
||
defaultSetting.NavigationClassName = setting.NavigationClassName || defaultSetting.NavigationClassName
|
||
defaultSetting.next = setting.next || defaultSetting.next
|
||
defaultSetting.previous = setting.previous || defaultSetting.previous
|
||
defaultSetting.autoPlay = setting.autoPlay || defaultSetting.autoPlay
|
||
defaultSetting.data = setting.data || defaultSetting.data
|
||
|
||
if ( defaultSetting.data.length == 0 || (document.querySelector(defaultSetting.containerClassName) == null ||
|
||
document.querySelector(defaultSetting.NavigationClassName) == null||
|
||
document.querySelector(defaultSetting.next) == null||
|
||
document.querySelector(defaultSetting.previous) == null)) {
|
||
console.error("类名不存在或data数据源为空，请仔细检查")
|
||
} else {
|
||
this.init()
|
||
}
|
||
}
|
||
|
||
LunBo.prototype = {
|
||
init() {
|
||
this.RenderContainer()
|
||
this.RenderNavigation()
|
||
this.BindPreviousClick()
|
||
this.BindNextClick()
|
||
|
||
setTimeout(() => defaultSetting.imgWidth = document.querySelector("img").width, 300)
|
||
|
||
},
|
||
|
||
|
||
// 渲染 轮播图的数据到页面
|
||
RenderContainer() {
|
||
// var ddd = this;
|
||
defaultSetting.data.forEach((val,index) => {
|
||
this.$(defaultSetting.containerClassName).innerHTML +=
|
||
`
|
||
<li>
|
||
<a target="_blank" href="${val.href}">
|
||
<img src="${val.imgUrl}" alt="">
|
||
</a>
|
||
</li>
|
||
`
|
||
});
|
||
|
||
},
|
||
|
||
// 渲染小圆点
|
||
RenderNavigation() {
|
||
defaultSetting.data.forEach((val,index) => {
|
||
this.$(defaultSetting.NavigationClassName).innerHTML +=
|
||
`
|
||
<li class="${index == 0 ? 'active' : ''}"></li>
|
||
`
|
||
});
|
||
this.BindYdClick()
|
||
},
|
||
|
||
|
||
changeActiveYd() {
|
||
var index = Math.abs(parseInt(this.$(defaultSetting.containerClassName).style.left)) / defaultSetting.imgWidth;
|
||
var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
|
||
LiArr.forEach(function(val){
|
||
val.className = ""
|
||
})
|
||
LiArr[index].className = "active"
|
||
},
|
||
|
||
// 小圆点绑定事件
|
||
BindYdClick() {
|
||
var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
|
||
LiArr.forEach((val,index) => {
|
||
val.onclick = () => {
|
||
LiArr.forEach(function(v){
|
||
v.className = ""
|
||
})
|
||
val.className = "active"
|
||
this.$(defaultSetting.containerClassName).style.left = `${index * -defaultSetting.imgWidth}px`;
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
// 右侧下一页数
|
||
BindPreviousClick() {
|
||
this.$(defaultSetting.previous).onclick = () => {
|
||
this.OffSetDistance(-defaultSetting.imgWidth)
|
||
this.changeActiveYd()
|
||
}
|
||
},
|
||
|
||
// 左侧上一页
|
||
BindNextClick() {
|
||
this.$(defaultSetting.next).onclick = () => {
|
||
this.OffSetDistance(defaultSetting.imgWidth)
|
||
this.changeActiveYd()
|
||
}
|
||
},
|
||
|
||
|
||
OffSetDistance(nums) {
|
||
|
||
var Offset = parseInt(this.$(defaultSetting.containerClassName).style.left) + nums;
|
||
// console.log("Offset: ", Offset)
|
||
var maxWidth = defaultSetting.imgWidth * (defaultSetting.data.length - 1);
|
||
|
||
// console.log("maxWidth: ", maxWidth)
|
||
|
||
this.$(defaultSetting.containerClassName).style.left = `${Offset}px`
|
||
|
||
if (Offset < -maxWidth ) {
|
||
this.$(defaultSetting.containerClassName).style.left = "0px";
|
||
}
|
||
|
||
if (Offset > 0) {
|
||
this.$(defaultSetting.containerClassName).style.left = `-${maxWidth}px`;
|
||
}
|
||
},
|
||
|
||
$(calssName) {
|
||
return document.querySelector(calssName)
|
||
}
|
||
}
|
||
|
||
win.Swiper = LunBo
|
||
|
||
|
||
})(window)
|
||
|
||
// es6 语法糖
|
||
// js代码转换工具 babel
|
||
// class Lunbo {
|
||
|
||
// constructor(setting) {
|
||
// this.init()
|
||
// }
|
||
|
||
// init () {
|
||
|
||
// }
|
||
// }
|
||
|
||
// function init() {
|
||
|
||
// }
|
||
|
||
// var ddd = new Lunbo({
|
||
// id: 3
|
||
// });
|
||
// ddd.init()
|