161 lines
5.0 KiB
JavaScript
161 lines
5.0 KiB
JavaScript
(function(bom, dom){
|
|
|
|
// 插件的使用配置
|
|
let configDefaults = {
|
|
time: 3000,
|
|
pageaction: {
|
|
prev: 'action-left', // 上一页按钮class
|
|
next: 'action-right' // 下一页按钮class
|
|
}
|
|
}
|
|
|
|
// 插件程序的配置
|
|
let config = {
|
|
timer: null,
|
|
lengths: document.getElementsByClassName('broadcast-wrapper')[0].getElementsByTagName("li").length,
|
|
fatherWrapper: 'broadcast-wrapper',
|
|
circular: 'circular-list',
|
|
width() {
|
|
return document.getElementsByClassName(this.fatherWrapper)[0].getElementsByTagName("li")[0].getElementsByTagName("img")[0].width
|
|
},
|
|
returnFatherWrapper() {
|
|
return document.getElementsByClassName(this.fatherWrapper)[0]
|
|
},
|
|
totalWidth() {
|
|
return parseInt(`-${(this.lengths - 1) * this.width()}`)
|
|
},
|
|
returnCircular() {
|
|
return document.getElementsByClassName(this.circular)[0]
|
|
},
|
|
createdCircular() {
|
|
var html = ""
|
|
for (let i = 0; i < this.lengths; i++) {
|
|
html+= `<li class="${i == 0 ? 'active' : ''}"></li>`
|
|
}
|
|
this.returnCircular().innerHTML = html
|
|
}
|
|
}
|
|
|
|
var index = 1;
|
|
|
|
|
|
|
|
function Broadcast(options) {
|
|
if(arguments.length == 0) {
|
|
console.error('请传入默认配置')
|
|
}else {
|
|
configDefaults.time = options.time || configDefaults.time
|
|
configDefaults.pageaction.prev = options.pageaction.prev || configDefaults.pageaction.prev
|
|
configDefaults.pageaction.next = options.pageaction.next || configDefaults.pageaction.next
|
|
this.init()
|
|
}
|
|
}
|
|
|
|
|
|
Broadcast.prototype = {
|
|
// 函数的入口
|
|
init(){
|
|
config.createdCircular()
|
|
this.prevClick()
|
|
this.nextClick()
|
|
this.autoPlay()
|
|
this.autoChangeCircular()
|
|
|
|
document.getElementsByClassName('main')[0].onmouseover = () => this.stopPlay()
|
|
document.getElementsByClassName('main')[0].onmouseout = () => this.autoPlay()
|
|
},
|
|
|
|
// 上一页按钮点击事件
|
|
prevClick() {
|
|
this.$(configDefaults.pageaction.prev)[0].onclick = () => {
|
|
index--
|
|
if(index <= 0) {
|
|
index = config.lengths
|
|
}
|
|
this.clickChange()
|
|
this.transition(config.width())
|
|
}
|
|
},
|
|
|
|
// 下一页按钮点击事件
|
|
nextClick() {
|
|
|
|
|
|
this.$(configDefaults.pageaction.next)[0].onclick = () => {
|
|
index++
|
|
if(index > config.lengths) {
|
|
index = 1
|
|
}
|
|
this.clickChange()
|
|
this.transition(parseInt(`-${config.width()}`))
|
|
}
|
|
},
|
|
|
|
// 过渡动画的设置
|
|
transition(px) {
|
|
var offsetLeft = parseInt(config.returnFatherWrapper().style.left),
|
|
ow = offsetLeft + px;
|
|
if(ow >= config.totalWidth()) {
|
|
config.returnFatherWrapper().style.left = `${ow}px`
|
|
}else {
|
|
config.returnFatherWrapper().style.left = `0px`
|
|
}
|
|
|
|
if(ow > 0) {
|
|
config.returnFatherWrapper().style.left = `${config.totalWidth()}px`
|
|
}
|
|
},
|
|
|
|
clickChange() {
|
|
var Circularli = this.$(config.circular)[0].getElementsByTagName("li")
|
|
var Wrapperli = this.$(config.fatherWrapper)[0].getElementsByTagName("li")
|
|
for(let i = 0;i<Circularli.length;i++){
|
|
if(Circularli[i].className == "active"){
|
|
Circularli[i].className = ""
|
|
}
|
|
}
|
|
Circularli[index-1].className="active"
|
|
},
|
|
|
|
autoChangeCircular() {
|
|
// 小圆点
|
|
var Circularli = this.$(config.circular)[0].getElementsByTagName("li")
|
|
var Wrapperli = this.$(config.fatherWrapper)[0].getElementsByTagName("li")
|
|
var self = this
|
|
for(let i = 0;i<Circularli.length;i++){
|
|
Circularli[i].onmouseover = function () {
|
|
for(var j = 0;j<Circularli.length;j++){
|
|
if(Circularli[j].className == "active"){
|
|
Circularli[j].className = ""
|
|
}
|
|
}
|
|
Circularli[i].className="active"
|
|
config.returnFatherWrapper().style.left = `${parseInt(`-${i*config.width()}`)}px`
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
// 自动轮播
|
|
autoPlay() {
|
|
config.timer = setInterval(() => {
|
|
this.$(configDefaults.pageaction.next)[0].onclick()
|
|
}, configDefaults.time)
|
|
},
|
|
|
|
// 停止播放
|
|
stopPlay() {
|
|
clearInterval(config.timer)
|
|
},
|
|
|
|
// 获取元素
|
|
$(className){
|
|
return document.getElementsByClassName(className)
|
|
}
|
|
|
|
}
|
|
|
|
bom.Broadcast = Broadcast
|
|
|
|
|
|
})(window, document) |