比较简单的一种面向对象的轮播图写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
width: 790px;
height: 340px;
position: relative;
border: 1px solid orange;
margin: 50px auto;
}
.banner ul li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 1s
}
.banner ol {
position: absolute;
width: 180px;
height: 20px;
left: 50%;
margin-left: -90px;
bottom: 20px;
}
.banner ol li {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
margin: 0 5px;
text-indent: -99999px;
cursor: pointer;
}
.banner ol li.active {
background: lime;
}
#right,
#left {
font-size: 100px;
color: #fff;
font-family: verdana;
position: absolute;
text-decoration: none;
top: 110px;
display: none;
}
#left {
left: 20px;
}
#right {
right: 20px;
}
#right:hover,
#left:hover {
color: #000;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li style="opacity: 1;"><a href="javascript:;"><img src="img/1.jpg" /></a></li>
<li><a href="javascript:;"><img src="img/2.jpg" /></a></li>
<li><a href="javascript:;"><img src="img/3.jpg" /></a></li>
<li><a href="javascript:;"><img src="img/4.jpg" /></a></li>
<li><a href="javascript:;"><img src="img/5.jpg" /></a></li>
<li><a href="javascript:;"><img src="img/6.jpg" /></a></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<a href="javascript:;" id="left"><</a>
<a href="javascript:;" id="right">></a>
</div>
<script>
function Lunbo(){
this.oli=document.querySelectorAll('.banner ol li')
this.banner=document.querySelector('.banner')
this.left=document.querySelector('#left')
this.right=document.querySelector('#right')
this.uli=document.querySelectorAll('.banner ul li')
this.num=null;
let timer=null;
let _this=this
this.init=function(){
for(let i=0;i<this.oli.length;i++){
this.oli[i].onmouseover=function(){
_this.tabSwitch(i)
_this.num=i;
document.title=i
}
}
this.banner.onmouseover=function(){
_this.show()
clearInterval(timer)
}
this.banner.onmouseout=function(){
_this.hide()
timer=setInterval(function(){
_this.rightclick()
},1000)
}
this.left.onclick=function(){
_this.leftclick()
}
this.right.onclick=function(){
_this.rightclick()
}
timer=setInterval(function(){
_this.rightclick()
},1000)
}
this.tabSwitch=function(i){
for(let j=0;j<this.oli.length;j++ ){
this.oli[j].className=''
this.uli[j].style.opacity='0'
}
this.oli[i].className='active'
this.uli[i].style.opacity='1'
}
this.show=function(){
this.right.style.display='block';
this.left.style.display='block'
}
this.hide=function(){
this.left.style.display='none'
this.right.style.display='none'
}
this.leftclick=function(){
this.num--;
if(this.num<0){
this.num=this.oli.length-1;
}
this.tabSwitch(this.num)
document.title=this.num
}
this.rightclick=function(){
this.num++;
if(this.num>this.oli.length-1){
this.num=0;
}
this.tabSwitch(this.num)
document.title=this.num
}
}
new Lunbo().init()
</script>
</body>
</html>