css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
ul{
float: left;
width: 600%;
height:400px;
}
ul>li{
float: left;
display: none;
}
ol{
position: absolute;
bottom:20px;
right: 50%;
transform: translateX(50%);
}
ol>li{
display: inline-block;
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(44,44,44,.3);
border: 1px solid #fff;
}
.current{
background-color: #ff4500;
}
#arrow_l,#arrow_r{
position: absolute;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
z-index: 100;
width: 40px;
height: 70px;
background: url(./images/icon-slides.png);
border: none;
}
#arrow_l{
background-position-x: -86px;
}
#arrow_r{
right: 0;
background-position-x: -125px;
}
html
<div class="box">
<button id="arrow_l"></button>
<button id="arrow_r"></button>
<ul>
<li style="display: block;"><img src="./images/01.png" alt=""></li>
<li><img src="./images/02.png" alt=""></li>
<li><img src="./images/03.png" alt=""></li>
<li><img src="./images/04.png" alt=""></li>
<li><img src="./images/05.png" alt=""></li>
</ul>
<ol class="circle">
</ol>
</div>
js
<script>
var list=document.querySelectorAll("ul>li");
var ol=document.querySelector(".circle");
var arrow_r=document.querySelector("#arrow_r");
var arrow_l=document.querySelector("#arrow_l");
var count=0;
var circle=0;
arrow_r.onclick=function(){
if(count<list.length-1){
count++;
}else{
count=0;
}
for(var i=0;i<list.length;i++){
list[i].style.display="none";
}
list[count].style.display="block"
if(circle==ol.children.length-1){
circle=0;
}else{
circle++;
}
for(var i=0;i<ol.children.length;i++){
ol.children[i].className="";
}
ol.children[circle].className="current";
}
arrow_l.onclick=function(){
if(count<=0){
count=list.length-1;
}else{
count--;
}
for(var i=0;i<list.length;i++){
list[i].style.display="none";
}
list[count].style.display="block"
}
setInterval(function(){
arrow_r.click();
},2000)
for(var i=0;i<list.length;i++){
var li= document.createElement("li");
ol.appendChild(li);
ol.children[i].setAttribute("index",i);
ol.children[i].onclick=function(){
for(var i=0;i<ol.children.length;i++){
ol.children[i].className="";
list[i].style.display="none";
}
this.className="current";
var index=this.getAttribute("index");
list[index].style.display="block";
}
}
ol.children[0].className="current";
</script>