<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
#banner{
height: 740px;
}
#left,#right{
font-size: 2.2em;
color: #fff;
position: absolute;
top: 45%;
padding: 5px;
cursor: pointer;
}
#left{
left: 0;
}
#right{
right: 0;
}
#circle{
position:absolute;
bottom: 30%;
left: 50%;
transform: translateX(-50%);
}
#circle span{
display: block;
width:10px;
height:10px ;
border-radius:50%;
background: transparents;
border: 1px solid #fff;
margin-left: 12px;
float: left;
cursor: pointer;
}
#circle .active{
width: 12px;
height: 12px;
background: #fff;
}
</style>
</head>
<body>
<div id="banner">
<div id="left"><</div>
<img src="images/1.jpg" width="100%" height="100%" id="lunbo">
<div id="right">></div>
<div id="circle">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var lb = document.getElementById("lunbo");
var circle = document.getElementById('circle');
var cirSpan = circle.querySelectorAll('span');
var left = document.getElementById("left")
var right = document.getElementById("right")
var num=1;
function time(){
num++;
for(let i = 0;i<cirSpan.length;i++){
cirSpan[i].classList.remove('active');
}
if(num == 5) num = 1;
lb.src="images/"+num+".jpg"
cirSpan[num-1].classList.add('active');
}
var bbb = setInterval(time,2000);
lb.onmousemove= function(){
clearInterval(bbb);
}
lb.onmouseout = function(){
bbb = setInterval(time,1000);
}
left.onclick=function(){
num--;
for(let i = 0;i<cirSpan.length;i++){
cirSpan[i].classList.remove('active');
}
if(num == 0){
num = 4;
}
lb.src="images/"+num+".jpg" ;
cirSpan[num-1].classList.add('active');
}
right.onclick=function(){
num++;
for(let i = 0;i<cirSpan.length;i++){
cirSpan[i].classList.remove('active');
}
if(num == 5){
num = 1;
}
lb.src="images/"+num+".jpg" ;
cirSpan[num-1].classList.add('active');
}
for(let i = 0;i<cirSpan.length;i++){
cirSpan[i].addEventListener("click",function(){
for(let j = 0; j<cirSpan.length;j++){
cirSpan[j].classList.remove("active");
}
this.classList.add("active");
num = i;
lb.src="images/"+(i+1)+'.jpg';
});
}
</script>
</body>
</html>
Processed:
0.011, SQL:
8
