html
<div class="banner">
<ul class="imgBox">
<li class="active"><img src="./imgs/img1.jpg" alt=""></li>
<li><img src="./imgs/img2.jpg" alt=""></li>
<li><img src="./imgs/img3.jpg" alt=""></li>
<li><img src="./imgs/img4.jpg" alt=""></li>
</ul>
<ol>
<li data-i="0" data-name="point" class="active"></li>
<li data-i="1" data-name="point"></li>
<li data-i="2" data-name="point"></li>
<li data-i="3" data-name="point"></li>
</ol>
<div class="left"><</div>
<div class="right">></div>
</div>
css
<style>
*{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
img{
width: 100%;
height: 100%;
display: block;
}
.banner{
width: 100%;
height: 500px;
position: relative;
margin: 50px 0;
}
.banner ul{
width: 100%;
height: 100%;
position: relative;
}
.banner ul li{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity .5s linear;
}
.banner ul li.active{
opacity: 1;
}
.banner ol{
width: 200px;
height: 30px;
position: absolute;
left: 30px;
bottom: 30px;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 15px;
}
.banner > ol > li{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.banner > ol > li.active{
background-color: orange;
}
.banner > div{
width: 40px;
height: 60px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
cursor: pointer;
}
.banner > div.left{
left: 0;
}
.banner > div.right{
right: 0;
}
</style>
js
<script>
var imgs = document.querySelectorAll('ul > li')
var points = document.querySelectorAll('ol > li')
var banner = document.querySelector('.banner')
var index = 0
function changeOne(type) {
imgs[index].className = ''
points[index].className = ''
if( type === true){
index++
}else if( type === false){
index--
}else {
index = type
}
if(index >= imgs.length){
index = 0
}
if(index < 0) {
index = imgs.length -1
}
imgs[index].className = 'active'
points[index].className = 'active'
}
banner.onclick = function(e) {
if(e.target.className === 'left') {
changeOne(false)
}
if(e.target.className === 'right'){
changeOne(true)
}
if(e.target.dataset.name === 'point'){
var i = e.target.dataset.i - 0
changeOne(i)
}
}
setInterval(function(){
changeOne(true)
},5000)
</script>
效果图