JavaScript—banner轮播图

HTML

<div class="banner">
    <ul class="bannerImg" >
         <li><img src="img/1096.png" width='100%' /></li>
         <li><img src="img/1096.png" width='100%' /></li>
	 <li><img src="img/1096.png" width='100%' /></li>
	 <li><img src="img/1096.png" width='100%' /></li>
	 <li><img src="img/1096.png" width='100%' /></li>
	 <li><img src="img/1096.png" width='100%' /></li>
    </ul>
    <ul class="bannerNum">
         <li></li>
	 <li></li>
	 <li></li>
	 <li></li>
	 <li></li>
	 <li></li>
    </ul>
</div>

CSS

.banner{position: relative;}
.bannerImg li{
	width:3.75rem;
	height:1.75rem;
	display: none;
}
.bannerImg li:first-child{display: block;}
.bannerNum{
	display: flex;
	position:absolute;
	right:0.15rem;
	margin-top:-0.3rem;
	z-index: 1;
}
.bannerNum li{
	width:0.1rem;
	height:0.1rem;
	border: 0.01rem solid #fff;
	border-radius: 0.05rem;
	margin: 0.02rem;
}
.bannerNum .active{background:red;border: red;}

JS

var index = 0
var $dom = document.querySelectorAll('.bannerImg li')
var $dom2 = document.querySelectorAll('.bannerNum li')
$dom2[0].className = 'active'
var len = $dom.length;
setInterval(function(){
    index++
    $dom.forEach(function(v,i){
    v.style.display = 'none'
})
$dom[index].style.display = 'block';
$dom2.forEach(function(v,i){
    v.className = ''
})
$dom2[index].className = 'active';
if(index>=len-1){
    index = -1
    }
},1000)