Ir ao conteúdo
Regras do Clube do Hardware

Javascript javascript ocultar div a cada x tempo

Kelvim

Por Kelvim
em Web e banco de dados

 Compartilhar

Posts recomendados

Kelvim
 

Kelvim

Postado
Postado

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>

 

  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

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

 

Insurgent3
 

Insurgent3

Postado
Postado

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.

Crie uma conta ou entre para comentar

Você precisa ser um usuário 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
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades 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

Mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!