轮播
js部分
(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
},
//获取ul节点
returnFatherWrapper() {
return document.getElementsByClassName(this.fatherWrapper)[0]
},
//计算当前宽度
totalWidth() {
return parseInt(`-${(this.lengths - 1) * this.width()}`)
},
//获取ol节点
returnCircular() {
return document.getElementsByClassName(this.circular)[0]
}
}
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()
document.getElementsByClassName('main')[0].onmouseover = () => this.stopPlay()
document.getElementsByClassName('main')[0].onmouseout = () => this.autoPlay()
},
// 上一页按钮点击事件
prevClick() {
this.$(configDefaults.pageaction.prev)[0].onclick = () => {
this.transition(config.width())
}
},
// 下一页按钮点击事件
nextClick() {
this.$(configDefaults.pageaction.next)[0].onclick = () => {
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`
}
},
// 自动自动播放
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)
html部分
<div class="main">
<!-- 轮播图片部分 -->
<ul style="left: 0" class="broadcast-wrapper">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
</ul>
<div class="page-action">
<!-- 上一页 -->
<div class="action-left"> < </div>
<!-- 下一页 -->
<div class="action-right"> > </div>
</div>
</div>
//广播
<script>
new Broadcast({
time: 3000,
pageaction: {
// 上一页按钮class
prev: 'action-left',
// 下一页按钮class
next: 'action-right'
}
})
</script>
css样式
@charset "UTF-8";
body,ul,ol,li {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.main ul li,
.circular-list li {
float: left;
}
.main ul {
width: 2100px;
height: 280px;
position: absolute;
transition: all 0.6s;
}
.main .page-action {
position: absolute;
width: 100%;
top: 50%;
margin-top: -20px;
}
.action-left,.action-right {
width: 40px;
height: 40px;
background: #00000087;
color: #fff;
text-align: center;
line-height: 35px;
font-size: 26px;
border-radius: 100%;
}
.action-left{
float: left;
margin-left: 10px;
}
.action-right {
float: right;
margin-right: 10px;
}
.circular-list {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -36px;
}
.circular-list li {
width: 13px;
height: 13px;
background: #fff;
border-radius: 100%;
margin-right: 5px;
}
.active {
background: #d0c300 !important;
}
