<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style-type:none}
.banner{
width:600px;
height:400px;
border:10px solid #333;
border-radius:15px;
margin:100px auto;
position:relative;
}
.banner>ul{
width:100%;
height:100%;
position:relative;
}
.banner>ul>li{
width:100%;
height:100%;
text-align:center;
line-height:400px;
font-size:200px;
color:#fff;
position:absolute;
left:0;
top:0;
opacity:0;
transition: opacity 0.5s linear;
}
.banner>ul>li.active{
opacity:1;
}
.banner>ol{
width:175px;
padding-right:15px;
position:absolute;
left:50%;
bottom:30px;
margin-left:-95px;
background-color: rgba(0,0,0,0.5);
height:25px;
padding-top:5px;
}
.banner>ol>li{
width:20px;
height:20px;
float:left;
background-color: #fff;
border-radius:50%;
margin-left:15px;
cursor:wait;
}
.banner>ol>li.active{
background-color: greenyellow;
}
.banner>div{
width:100%;
height:60px;
position:absolute;
left:0;
top:50%;
margin-top:-30px;
}
.banner>div>p{
float:left;
text-align:center;
width:40px;
height:100%;
line-height:60px;
color:#fff;
background-color: grey;
}
.banner>div>.right{
float:right;
}
</style>
</head>
<body>
<div class="banner">
<ul class="imgBox">
<li class="active" style="background-color:gainsboro">1</li>
<li style="background-color:rgb(219, 48, 48)">2</li>
<li style="background-color:rgb(229, 233, 8)">3</li>
<li style="background-color:rgb(38, 9, 206)">4</li>
<li style="background-color:rgb(15, 227, 235)">5</li>
</ul>
<ol>
</ol>
<div>
<p class="left"><</p>
<p class="right">></p>
</div>
</div>
<script>
const imgBox=document.querySelector('.banner>ul')
const focusBox=document.querySelector('.banner>ol')
const banner=document.querySelector('.banner')
setFocus()
let index=0;
let timer;
automatic()
overOut()
bindEvent()
maintenance()
function maintenance(){
document.addEventListener('visibilitychange',function(){
if(document.visibilityState === 'hidden') clearInterval(timer)
if(document.visibilityState === 'visible') automatic()
})
}
function bindEvent(){
banner.addEventListener('click',(e)=>{
if(e.target.className === 'left') vary(false)
if(e.target.className === 'right') vary(true)
if(e.target.className === 'focus'){
console.log(i=e.target.dataset.index/1,typeof i)
vary(i)
}
})
}
function overOut(){
banner.addEventListener('mouseover',function(){
clearInterval(timer)
})
banner.addEventListener('mouseout',function(){
automatic()
})
}
function automatic(){
timer=setInterval(()=>{
vary(true)
},1000)
}
function vary(flag=true){
imgBox.children[index].classList.remove('active')
focusBox.children[index].classList.remove('active')
// flag ? ++index : --index
switch(flag){
case true:
++index
break
case false:
--index
break
default:
index=flag
}
if(index>=imgBox.children.length) index=0
if(index<0) index=imgBox.children.length-1
imgBox.children[index].classList.add('active')
focusBox.children[index].classList.add('active')
}
function setFocus(){
const num=imgBox.children.length
const frg=document.createDocumentFragment()
for(let i=0;i<num;++i){
const li=document.createElement('li')
li.classList.add('focus')
li.dataset.index=i
if(i===0) li.classList.add('active')
frg.appendChild(li)
}
focusBox.appendChild(frg)
focusBox.style.width=num*35+'px'
focusBox.style.marginLeft=-focusBox.offsetWidth/2+'px'
}
</script>
</body>
</html>
