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 Febatera7
      Preciso construir um microsserviço, apenas no lado do servidor (Node.js) que leia menções e comentários em postagens em que o @ do meu cliente foi marcado, em seguida, salve essas mensagens em nosso banco de dados, para especialistas de atendimento para responderem mais tarde.
      Este microsserviço também deve ser capaz de ler e salvar as fotos destas postagens e comentários.
      Para Node.js, vi que não há SDK, então procurei os terceiros que o próprio Facebook indica, mas não encontrei nada sobre ler e responder a menções e comentários em postagens.
      Tentei utilizar as bibliotecas fb e fbgraph, mas nenhuma delas me dá as opções para ler postagens em que fui marcado, apenas as do meu próprio feed.
      Alguém pode me ajudar? Por onde posso começar? Há alguma outra biblioteca que consiga utilizar?
    • By Sapinn
      Fala galera, tudo blz? Então estou com uma dúvida um pouco boba mas que não consegui resolver o problema ainda. Estou desenvolvendo um site para agendamento de serviços e resolvi fazer a pagina principal como uma dashboard (área de administrador) onde seria muito mais fácil para o usuário registrar os serviços entre outras coisas, enfim, estou com um problema quanto ao layout da página. Normalmente o dashboard tem um menu à esquerda e o conteúdo  fica à direita quando ocorre o clique no botão hambúrguer( Aquele que tem três tracinhos) esse menu é recolhido e esse conteúdo que fica a direita fica centralizado, às vezes, em muitos dashboard esse menu só é um pouco recolhido ficando amostra apenas os ícones enquanto o conteúdo da direita fica um pouco mais centralizado. A pergunta é como eu posso fazer isso? Outra coisa, na responsividade quando a página diminui o menu da uma retraída e o conteúdo fica centralizado quando é clicado no botão hambúrguer o menu não afasta o conteúdo de volta e sim fica por cima desse conteúdo. Não sei como fazer isso, eu estou melhorando quando ao desenvolvimento front-end mas ainda não é muito a minha praia. Eu tentei fazer isso com css grid (que por sinal é algo que eu não tenho tanta pratica, já que eu sou melhor com flebox) mas não funcionou e o código só ficou ruim e confuso. Se alguém puder me ajudar ficaria muito grato
       
      Não tem muito coisa ainda mas irei disponibilizar o código que desenvolvi até agora:
       
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Sistema de Gerenciamento</title>     <link rel="stylesheet" href="assets/css/style.css">     <link rel="icon" href="assets/images/icone-logo.png">     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"> </head> <body>     <header>         <div class="bar-header">             <i class="bi bi-list"></i>         </div>     </header>     <nav class="menu">         <div class="user">             <i class="bi bi-person-circle"></i>             <p>Nome do Usuário</p>         </div>         <ul>             <li class="active"><a href=""><i class="bi bi-house-fill"></i> Inicio</a></li>             <li><a href=""><i class="bi bi-calendar-plus-fill"> </i>Adicionar Serviço</a></li>             <li><a href=""><i class="bi bi-person-plus-fill"></i> Adicionar Admin</a></li>             <li><a href=""><i class="bi bi-file-earmark-post-fill"></i> Configurações de Nota</a></li>             <li><a href=""><i class="bi bi-file-person"></i> Configurações da Conta</a></li>             <li><a href=""><i class="bi bi-box-arrow-right"></i> Sair</a></li>         </ul>     </nav>     <main></main>     <footer></footer> </body> </html>  
       
      *{     padding: 0;     margin: 0; } body{     font-family: Arial, Helvetica, sans-serif;     background-color: #e5e5e5; } .bar-header{     background-color: #4285f4;     position: fixed;     color: #fff;     width: 100%;     height: 40px;     font-size: 37px;     padding: 8px 16px;     z-index: 1; } .menu{     background-color: #26353e;     width: 260px;     height: 100vh;     position: fixed;     padding-top: 65px; } .menu ul li{     list-style: none;     padding: 15px;     cursor: pointer;     border-bottom: 1px solid #26353e; } .menu ul li:hover{     background-color: #4285f4;      } .menu li a{     color: #fff;     font-size: 18px;     text-decoration: none;     } .menu i{     font-size: 27px; } .menu .active{     background-color: #4285f4; } .user{     margin-left: 50px;     padding-bottom:10px ; } .user i{     font-size: 120px;     color: #4285f4; } .user p{     font-weight: bold;     font-size: 18px;     color: #fff; }
       
    • By acneto.frc
      Boa noite a todos.
      Uso Nodejs + express + Mysql
      O retorno abaixo é de retorno da Model quando consultado um registro :id
      Preciso extrair para duas variáveis diferentes a chave  e o valor de um objeto javascripr.
       
      RowDataPacket {
        liv_codigo: 5,
        liv_titulo: 'Guia Mangá - Microprocessadores',
        liv_edicao: '1ª Edição',
        liv_isbn: '987-321',
        liv_ano: 2016,
        aut_codigo: 2,
        edt_codigo: 3,
        liv_ativoinativo: 'A'
      }
       
      Este retorno é resultado da uma consulta SQL  de um registro (:id) na tabela
      Preciso armazenar em arrays diferentes a chave e o valor.
       
      Abraços e obrigado.
       
       
       
×

Important Information

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