轮播图
凡遇到网页百分之九十九点九九都会遇到轮播图，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#banner{
width: 500px;
height: 300px;
border: #008877 solid 3px;
}
#ad{
width: 200px;
height: 140px;
border: 3px solid #FF4400;
}
</style>
</head>
<body>
<div id="banner">
</div>
<br>
<br>
<div id="ad">
</div>
<script type="text/javascript">
function Lunbo(options){
this.el = document.querySelector(options.el);
this.data = options.data;
this.pagination = options.pagination || false;
this.toggleBtn = options.toggleBtn || false;
this.time = options.time || 2000
this.view();
this.toggle();
}
Lunbo.prototype = {
view(){
this.el.style.position = "relative";
this.data.forEach(i=>{
let img = document.createElement("img")
img.src = i;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = "absolute";
img.style.top = 0;
img.style.left = 0;
this.el.appendChild(img)
})
},
toggle(){
let i = 0;
setInterval(()=>{
i++;
if(i>this.data.length-1){
i=0
}
[...this.el.children].forEach(j=>{
j.style.zIndex = 0
})
this.el.children[i].style.zIndex = 1
},this.time)
}
}
let L1 = new Lunbo({
el:"#banner",
data:["../image/01.jpg","../image/02.jpg","../image/03.jpg","../image/04.jpg"],
pagination:true,
toggleBtn:true,
time:1500
})
let L2 = new Lunbo({
el:"#ad",
data:["../image/04.jpg","../image/03.jpg","../image/02.jpg","../image/01.jpg"],
time:3000
})
</script>
</body>
</html>
效果图：
