可点击的气泡控制自动幻灯片纯JavaScript

如何将标记的气泡链接到JavaScript自动滑块（window.setInterval（function slideA（） { ） ？检查代码以了解此问题。幻灯片会自动移动，但气泡仅在单击时做出反应。

var imagecount = 1;
var total = 3;
function slide(x) {
	var Image = document.getElementById('img');
	var nodes = document.getElementById('bubbles').getElementsByTagName('div');
        for(var i=0; i<nodes.length; i++) {
        if(i == imagecount-1) {
        nodes[i].style.backgroundColor = '#F86215';
        }
        else {
        nodes[i].style.backgroundColor = 'transparent';    
          }
            }      
	imagecount = imagecount + x;
	if (imagecount > total){ imagecount = 1;}
	if (imagecount < 1){ imagecount = total;}
	Image.src = "IMAGE/img"+ imagecount +".jpg";
	}
	
window.setInterval(function slideA() {
	var Image = document.getElementById('img'); 
	imagecount = imagecount + 1;
	if (imagecount > total){ imagecount = 1;}
	if (imagecount < 1){ imagecount = total;}
	Image.src = "IMAGE/img"+ imagecount +".jpg";
	}, 5000);
	
function selectSlide(slideNumber){
  		imagecount = slideNumber;
  		var Image = document.getElementById('img');
  		Image.src = "IMAGE/img"+imagecount +".jpg";
} 
function selectSlide(slideNumber, divid){
	 	var nodes = document.getElementById('bubbles').getElementsByTagName('div');
		   for(var i=0; i<nodes.length; i++) {
            nodes[i].style.backgroundColor = 'transparent';
        }        
		divid.style.backgroundColor = '#F86215';
  		imagecount = slideNumber;
  		var Image = document.getElementById('img');
  		Image.src = "IMAGE/img"+imagecount +".jpg";
		
		}

#img {
	width: 100%;
	position: relative;
	height: auto;
}
.container-fluid {
	width: 100%;
	height: auto;
	position: relative;
}
.container-fluid #left-arrow .left {
	width: 60px;
	position: absolute;
	top: 31%;
	left: 0px;
}
.container-fluid #right-arrow .right {
	position: absolute;
	top: 31%;
	right: 0px;
	width: 60px;
}
.container #left-arrow .left:hover {
	cursor:pointer;
	cursor: hand;
}
.container #right-arrow .right:hover {
	cursor:pointer;
	cursor: hand;
}
#bubbles{
	width: 120px;
	margin: 0px auto;
	text-align: center;
	top: 80%;
	position: absolute;
	left: 45%;
} 
#bubbles > div{
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 24px 10px 0px 10px;
	background: rgba(0,0,0,.1);
	text-align: center;
	border: 2px solid #F86215;
	border-radius: 100%;
	font-size: 19px;
	text-decoration: none;
	transition: background 0.3s linear 0s;
	cursor: pointer;
} 

<div class="container-fluid">
<img src="IMAGE/img1.jpg" alt="" id="img"/>
<div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
<div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>
<div id="bubbles"> 
<div onclick="selectSlide(1,this)" style="background:#F86215;"></div> 
<div onclick="selectSlide(2,this)"></div> 
<div onclick="selectSlide(3,this)"></div>
</div>
</div>