Banner rotativo com controlador

Como posso fazer este banner rotativo ,com controles, funcionar corretamente?

Quando ativo um dos controles, ele buga.

javascript

<script type="text/javascript">

var tempo;

function mouse(tipo) {
document.getElementById('quadrado' + tipo).style.cursor = "pointer";
}
function mouse2(tipo2) {
document.getElementById('quadrado' + tipo2).style.cursor = "default";
}
function slide1() {
document.getElementById('banner').src = "../1.jpg";
tempo = setTimeout(slide2, 4000);
document.getElementById('quadrado1').style.backgroundColor = "#3e4095";
document.getElementById('quadrado2').style.backgroundColor = "#ffffff";
document.getElementById('quadrado3').style.backgroundColor = "#ffffff";
}
function slide2() {
document.getElementById('banner').src = "../2.jpg";
tempo = setTimeout(slide3, 4000);
document.getElementById('quadrado1').style.backgroundColor = "#ffffff";
document.getElementById('quadrado2').style.backgroundColor = "#3e4095";
document.getElementById('quadrado3').style.backgroundColor = "#ffffff";
}
function slide3() {
document.getElementById('banner').src = "../3.jpg";
tempo = setTimeout(slide1, 4000);
document.getElementById('quadrado1').style.backgroundColor = "#ffffff";
document.getElementById('quadrado2').style.backgroundColor = "#ffffff";
document.getElementById('quadrado3').style.backgroundColor = "#3e4095";
}

</script>

CSS

#quadrado1, #quadrado2, #quadrado3{

background-color: #ffffff;
width: 30px;
height: 30px;
z-index: 9999;
border-radius: 30px;
top: 0px;
}
#bt{
position: absolute;
top: 440px;
height: 10px;
width: 700px;
z-index: 9999;
left: 10px;
}
#quadrado1{
position: relative;
left: 100px;
top: 0px;
}
#quadrado2{
position: relative;
left: 140px;
top: -30px;
}
#quadrado3{
position: relative;
left: 180px;
top: -60px;
}

HTML

<div id="bt">

<div id="quadrado1" onmouseout="mouse2(1)" onmouseover="mouse(1)" onclick="slide1()"></div>
<div id="quadrado2" onmouseout="mouse2(2)" onmouseover="mouse(2)" onclick="slide2()"></div>
<div id="quadrado3" onmouseout="mouse2(3)" onmouseover="mouse(3)" onclick="slide3()"></div>

</div>