Jump to content
Sign in to follow this  
victorln1

Banner rotativo com controlador

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Bom dia Victor,

Recomento você a usar a propriedade "transition" do CSS para animações no seu slideshow.

O bug que está acontecendo é devido ao seu "window.setTimeout", provavelmente ele deve ta sendo disparado varias vezes devido aos seus eventos "mouseover, mouseout, click".

Abs.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By xdxddxd
      ao clicar em um botão eu gostaria de exibir um confirm no site, mas eu gostaria de Mudar de "OK" Para "Home" e "Cancelar" para "Estoque".
      isso usando javascript puro, alguem pode me ajudar ?
      já agradeço de já.
      tem que usar algum plugin no site ou tem como fazer puro mesmo.
      se quiser deixar só um link com o tutorial eu já agradeço, porém não achei nenhum do jeito que eu quero no google.
    • By MatheusSmidt
      Bom dia,
      Estou precisando de ajuda com o código do formulário de um sistema de cadastro.
      A página é para consulta mas tem a possibilidade de adicionar ou retirar "faltas" de cada profissional cadastrado através de botões simples e também apagar um ou múltiplos profissionais da lista, através de checkbox..
      Essa ações atualizam o banco de dados e já retornam na tela automaticamente.
      O problema é que não fui eu que estruturei o código PHP e não consigo aliar as duas funções que falei anteriormente. Quando consigo fazer funcionar o sistema de adição e redução de faltas, consigo apenas excluir o último nome da lista, mesmo selecionando vários. E quando consigo resolver a parte de excluir vários nomes, não consigo adicionar e reduzir o número de faltas.
       
      Provavelmente é um problema no "WHILE" ou na abertura e fechamento de formulário. Porém não consegui resolver.
      Se alguém conseguir resolver seria ótimo.
      Agradeço desde já. Em anexo envio um print da página para melhor entendimento.
       
       
       
       
    • By guzulino
      Eu preciso criar um sistema de busca em tempo real vamos dizer assim, na realidade eu até consegui achar boa parte dele.
      <form onsubmit="return false;"> <input id="campo_cpu" type="text" name="nome_cpu" placeholder="Modelo do processador"> </form> <script src="auto-complete.js"></script> <script> var demo1 = new autoComplete({ selector: '#campo_cpu', minChars: 1, source: function(term, suggest){ term = term.toLowerCase(); var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML']; var suggestions = []; for (i=0;i<choices.length;i++) if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]); suggest(suggestions); } }); </script> Eu consegui esse código e ele funciona tranquilamente, mas isso é só um teste, o usuário vai digitar o que ele precisa e no banco de dados eu mais de 5000 registros, então eu preciso que seja feita uma consulta no banco de dados para que ele mostre o que tem lá, acho que colocar 5000 numa string é um #@?&#036;%~ trampo além de eu achar que vai dar caquinha, o problema é que eu não faço a mínima ideia de como fazer isso, eu acho que é tipo uma consulta no banco a cada caractére digitado mostrando somente os resultados compatíveis, mas como disse antes não tenho ideia, se alguém agradeço desde já. Valeu
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.