Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Kelvim

Javascript javascript ocultar div a cada x tempo

Recommended Posts

Postado (editado)

Boa noite

 

Eu estou editando um código e não estou conseguindo colocar para que uma imagem quem esta dentro de uma DIV seja alterada a cada X tempo.

Gostaria de por exemplo a cada 30 segundos uma imagem, depois de 30 segundos outra imagem.

 

Queria alterar entre a imagem de Index 0 e Index 1.

********************************************************************************************************

********** Index 0  **************

<div data-image-index="0" data-displayer-width="1678" data-displayer-height="1119" data-displayer-uri="45b0e3_f2808e64042b45f7ade77b6229a3d126~mv2.jpg" data-height-diff="0" data-width-diff="0" data-bottom-gap="0" data-image-wrapper-right="0" data-image-wrapper-left="0" data-image-wrapper-top="0" data-image-wrapper-bottom="0" data-margin-to-container="0" itemscope="" itemtype="http://schema.org/ImageObject" style="position: absolute; left: 0px; top: 0px; opacity: 0.000164131; visibility: inherit; height: 553px; width: 100%;" class="style-isqm9g1yimageItem" data-state="notShowPanel desktopView  unselected clipImage transIn normal noLink" id="comp-isqm6ofodataItem-iv884ilb">



********** Index 1  **************

<div data-image-index="1" data-displayer-width="1700" data-displayer-height="1130" data-displayer-uri="45b0e3_4a186640b54f4ce38907204ea23571c1~mv2.jpg" data-height-diff="0" data-width-diff="0" data-bottom-gap="0" data-image-wrapper-right="0" data-image-wrapper-left="0" data-image-wrapper-top="0" data-image-wrapper-bottom="0" data-margin-to-container="0" itemscope="" itemtype="http://schema.org/ImageObject" style="position: absolute; left: 0px; top: 0px; opacity: 0.382182; height: 553px; width: 100%; visibility: inherit;" class="style-isqm9g1yimageItem" data-state="notShowPanel desktopView  unselected clipImage transOut rollover noLink" id="comp-isqm6ofodataItem-iv883xp0">



********************************************************************************************************


<div id="c1537inlineContent" class="p1inlineContent">

<div style="overflow: hidden; left: 0px; right: 0px; position: absolute; margin-left: 0.5px; margin-right: 0px; top: 81px; height: 550px; width: 100%;" data-gallery-id="comp-isqm6ofo" data-height-diff="0" data-width-diff="0" class="style-isqm9g1y" data-state="hidePlayButton autoplayOn notMobile desktopView touchRollOut animationInProcess" id="comp-isqm6ofo">

<div class="style-isqm9g1y_border"></div>

<div style="height: 100%; z-index: 0;" data-gallery-id="comp-isqm6ofo" id="comp-isqm6ofoitemsContainer" class="style-isqm9g1yitemsContainer">


<div data-image-index="0" data-displayer-width="1678" data-displayer-height="1119" data-displayer-uri="45b0e3_f2808e64042b45f7ade77b6229a3d126~mv2.jpg" data-height-diff="0" data-width-diff="0" data-bottom-gap="0" data-image-wrapper-right="0" data-image-wrapper-left="0" data-image-wrapper-top="0" data-image-wrapper-bottom="0" data-margin-to-container="0" itemscope="" itemtype="http://schema.org/ImageObject" style="position: absolute; left: 0px; top: 0px; opacity: 0.000164131; visibility: inherit; height: 553px; width: 100%;" class="style-isqm9g1yimageItem" data-state="notShowPanel desktopView  unselected clipImage transIn normal noLink" id="comp-isqm6ofodataItem-iv884ilb">

<div draggable="false" style="cursor:default;height:100%;width:100%;position:absolute;top:0px;left:0px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-drag:none;-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;user-modify:read-only;-webkit-user-modify:read-only;-moz-user-modify:read-only;-ms-user-modify:read-only" data-page-item-context="dataItem-isqm6ogz" data-gallery-id="comp-isqm6ofo" id="comp-isqm6ofodataItem-iv884ilblink" class="style-isqm9g1yimageItemlink">

<div style="height: 553px; width: 100%; margin: 0px;" id="comp-isqm6ofodataItem-iv884ilbimageWrapper" class="style-isqm9g1yimageItemimageWrapper">

<div style="cursor:default" id="comp-isqm6ofodataItem-iv884ilbzoom" class="style-isqm9g1yimageItemzoom">

<div style="position: relative; width: 100%; height: 553px; overflow: hidden;" data-style="position:relative;overflow:hidden" class="style-isqm9g1yimageItemimage" id="comp-isqm6ofodataItem-iv884ilbimage">
<img id="comp-isqm6ofodataItem-iv884ilbimageimage" alt="" data-type="image" itemprop="contentUrl" src="TESTE _ Início_files/45b0e3_f2808e64042b45f7ade77b6229a3d126_mv2.webp" style="width: 100%; height: 553px; object-fit:cover;">
</div></div></div>

<div id="comp-isqm6ofodataItem-iv884ilbpanel" class="style-isqm9g1yimageItem_pnl style-isqm9g1yimageItempanel">
<h3 aria-hidden="true" style="text-align:left" itemprop="name" id="comp-isqm6ofodataItem-iv884ilbtitle" class="style-isqm9g1yimageItemtitle"></h3>

<p id="comp-isqm6ofodataItem-iv884ilbDescription" style="text-align:left" itemprop="description" class="style-isqm9g1yimageItemdescription">TESTEogados Belo Horizonte</p></div></div></div>

<div data-image-index="1" data-displayer-width="1700" data-displayer-height="1130" data-displayer-uri="45b0e3_4a186640b54f4ce38907204ea23571c1~mv2.jpg" data-height-diff="0" data-width-diff="0" data-bottom-gap="0" data-image-wrapper-right="0" data-image-wrapper-left="0" data-image-wrapper-top="0" data-image-wrapper-bottom="0" data-margin-to-container="0" itemscope="" itemtype="http://schema.org/ImageObject" style="position: absolute; left: 0px; top: 0px; opacity: 0.382182; height: 553px; width: 100%; visibility: inherit;" class="style-isqm9g1yimageItem" data-state="notShowPanel desktopView  unselected clipImage transOut rollover noLink" id="comp-isqm6ofodataItem-iv883xp0">


<div draggable="false" style="cursor:default;height:100%;width:100%;position:absolute;top:0px;left:0px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-drag:none;-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;user-modify:read-only;-webkit-user-modify:read-only;-moz-user-modify:read-only;-ms-user-modify:read-only" data-page-item-context="dataItem-isqm6ogz" data-gallery-id="comp-isqm6ofo" id="comp-isqm6ofodataItem-iv883xp0link" class="style-isqm9g1yimageItemlink">


<div style="height: 553px; width: 100%; margin: 0px;" id="comp-isqm6ofodataItem-iv883xp0imageWrapper" class="style-isqm9g1yimageItemimageWrapper">

<div style="cursor:default" id="comp-isqm6ofodataItem-iv883xp0zoom" class="style-isqm9g1yimageItemzoom">

<div style="position: relative; width: 100%; height: 553px; overflow: hidden;" data-style="position:relative;overflow:hidden" class="style-isqm9g1yimageItemimage" id="comp-isqm6ofodataItem-iv883xp0image"> 


<img id="comp-isqm6ofodataItem-iv883xp0imageimage" alt="" data-type="image" itemprop="contentUrl" src="TESTE_Início_files/45b0e3_4a186640b54f4ce38907204ea23571c1_mv2.webp" style="width: 100%; height: 553px; object-fit: cover;"></div></div></div>

 

Editado por DiF
Colocar o código com o botão CODE <> e mover para o lugar certo.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Postado (editado)

@Kelvim Olá,  

Onde está o seu código Javascript?  Só vejo o HTML.

Ademais, Evite de postar um código mal edentado.  Isso impossibilita de analisar o código.

 

Recomendo você procurar um plugin jquery de banners rotativos ou sliders.  você faz isso com poucas linhas!

 

Mas se não quiser usar um plugin jquery que é bem mais prático, pode fazer com poucas linhas uma galeria rotativa desta forma:

CSS:

#galeria { 
    margin: 50px auto; 
    position: relative; 
    width: 500px; 
    height: 200px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#galeria > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

 

HTML:

<div id="galeria">
   <div><img src="http://www.scgamesonline.com.br/images/Breve_DoomVFR.jpg"></div>
   <div><img src="https://static.gamevicio.com/imagens/noticias/245/500x200/244697-edicao-especial-limitada-de-god-of-war-revelada.jpg"></div>
   <div><img src="https://static.gamevicio.com/imagens/noticias/247/500x200/246393-skyrim-special-edition-esta-gratuito-para-jogar-no-steam-por-tempo-limitado.jpg"></div>
   <div><img src="https://i.pinimg.com/736x/81/25/03/8125037011ee2b22cb274cf7c41893e8--mmorpg-games-play-online.jpg"></div>
</div>

 

 

jQuery:

$("#galeria> div:gt(0)").hide();

setInterval(function() { 
  $('#galeria > div:first').fadeOut(1000)
    .next().fadeIn(1000).end().appendTo('#galeria');
},  3000);

Veja o exemplo funcionando aqui:   https://jsfiddle.net/dife/beqahg72/

 

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo,

 

Estou te enviando um código que talvez lhe seja útil. É um contador em Javascript que consegui elaborar pesquisando na internet muita coisa a respeito de contadores.

 

Ele adiciona 3 pontos de "turnos" a cada 60 segundos. É um contador também. Basta ver as funções que te agrada e implementar no seu código ou pesquisar na internet como a função " window.setInterval('atualizar()',1000)" que está no código.

 

Segue o código:

 

<html>
<head>

<title>Título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.texto {color:#B000FF;}
	
.static
{
	position:static;
}
.contador
{
	position: relative;
	top: 0px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;	
}
.PalavraTempo
{
	position: relative;
	position: center;
	top: 70px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;	
}
.TurnosDisponiveis
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;	
}
.Turnos
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;	
}
.Turno
{
	position: relative;
	position: center;
	top: 130px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;	
}
.php
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;	
}
</style>

<script>var intervalo = window.setInterval('funcao()',1000);
var contador = 0;
var Turno = 0;

function funcao()
{ 
  
   while (contador <= 60)
   {   
	   if (contador == 60)
	   {
	      contador = 0;
		  Turno = Turno + 3;
		  break;
	   }
	   elementosHTML = document.getElementsByClassName('contador');
	   elementosHTML[0].innerHTML = '   ' + ' ' +contador;
	   
	   turnosHTML = document.getElementsByClassName('Turnos');
	   turnosHTML[0].innerHTML = ' ' +Turno + '';
	   
	   contador++;

	   break;
   }
}   </script>

<script>var atualizacao = window.setInterval('atualizar()',1000);

function atualizar()
{ 
   <?php
   $Turnos = '<script> document.write(Turno);</script>';
   
   ?>
   window.location.refresh();
}   
</script>
</head>
<?php
   //$Turnos = 0;
?>
<body>

<div class="PalavraTempo">
Tempo
</div>

<div class="TurnosDisponiveis">
Turnos Disponíveis:
</div>

<div class="Turnos">
</div>

<div class="Turno">
<?php
   //echo "<script>atualizar();</script>";
   echo $Turnos;
?>
</div>

<div class="contador">

</body>
</html>

 

Muita gente que li, diz que não é possível implementar um "contador" em PHP e Javascript. Eu consegui chegar a este código acima(basta copiar e colar e executar no navegador). E tem outras funções como "sleep()" do PHP pra congelar o tempo, que junto com um laço "while" do PHP poderia ser utilizada pra fazer um contador.

 


Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×