Search the Community

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>