Ir ao conteúdo
  • Cadastre-se
Kelvim

Javascript javascript ocultar div a cada x tempo

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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/

 

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×