JQuery: Banner flutuante com contagem de tempo

Este post é um complemento do anterior.

O banner sumirá automaticamente após 8 segundos.

Usaremos as funções:
clearInterval()
setInterval()

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery - Banner Flutuante com Contagem de Tempo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  var $conteudo    = $('#conteudo').width(); // largura total	
  var $banner	   = $('#banner'); // objeto banner
  var $tempo	   = 8; // milisegundos
  var $intervalo;
 
  // evento click
  $(".fechar").click(function(event){
    event.preventDefault();
    fechar(); // chamada a função
  });
 
  // funcao que fechará o banner
  function fechar(){
    $("#banner").hide();
  }
 
  // funcao para contagem
  function contador(){
     $intervalo = window.setInterval(function() {
	var tempoContagem 	= $("#contador").html();
	var atualizaContagem 	= eval(tempoContagem) - eval(1);
	$("#contador").html(atualizaContagem);
 
	// chegando em zero o contador é parado
	if(atualizaContagem == 0){
	  pararContagem();
	}
     }, 1000);
  }
 
  // funcao para limpar o contador 
  function pararContagem(){
     window.clearInterval($intervalo);
  }
 
  // deslocamento do banner
  $banner.animate({ left: ($conteudo /4)}, 900).show();
  // chamada da funcao que fará a contagem
  contador();	
  // setando o tempo de execução do banner
  setTimeout(fechar, $tempo*1000);
});
</script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif }
#conteudo{ 
 margin:0 auto;
 width:1000px; 
 height:800px;
 background-color:#DDD;	
}
#banner{
 position:absolute;
 top:50px;
 left:0;
 float:left;
 width:180px; /* largura */
 height:180px; /* altura */
 background-color:#0066CC; /* cor de fundo */
 -webkit-border-radius: 8px; /* canto arredondado */
 -moz-border-radius: 8px; /* canto arredondado */
 border-radius: 8px; /* canto arredondado */
 z-index:999999; /* posicionando sobre os demais */
 display:none;
 color:#FFFFFF;
}
#banner a{ color:#FFFFFF;text-decoration:none }
#banner p { padding: 5px 10px 0; }
p.link{ text-align:center;clear:both }
#fechar{ 
 position:relative;
 float:right; 
 width:20px;
 height:20px;
 background-color:#000000;
 color:#FFFFFF;
 text-align:center; 
}
</style>
</head>
<body>
<div id="conteudo">
   <div id="banner">
      <div id="fechar"><a href="#" title="Fechar" class="fechar">X</a></div>
      <p class="link"><a href="#">JQuery - Banner Flutuante com Contador</a></p>
      <p>Este banner sumirá em <span id="contador">8</span> segundos.</p>
   </div>
</div>
</body>
</html>

Clique aqui para ver o funcionamento.

9 comentários em “JQuery: Banner flutuante com contagem de tempo

  • 17 de setembro de 2013 em 2:54
    Permalink

    Excelente Código, funciona perfeitamente. Obrigado

    Resposta
  • 24 de junho de 2014 em 20:40
    Permalink

    obrigado cara pela força,voce por acaso tem um com a mesma funcionalidade que dá pra alterar a imagem de fundo? desde ja agradeço pela força,funcionou muito bem.

    Resposta
  • 26 de fevereiro de 2015 em 13:15
    Permalink

    Gostaria de saber como setar um timeout para fechar este banner em 10 segundo por exemplo. ou uma função para que ele não seja mais exibido em determinada máquina (usando cookies).

    Resposta
  • 26 de fevereiro de 2015 em 14:46
    Permalink

    Desculpe, não fui claro em meu comentário anterior. Precisaria saber como exibir a contagem regressiva para fechar a janela ou como dar a opção de não exibir mais este pop-up para um cliente.

    Resposta
  • 22 de março de 2018 em 9:27
    Permalink

    Pessoal como faço para fechar essa div ao clicar no nome, ( Clique aqui para fechar )
    link da imagem: https://i.imgur.com/BmpYmqgg.png

    Esse é o meu código, já tentei de tudo más não consigo fazer com que ele feche ao clicar na imagem.

    Resposta
  • 24 de março de 2018 em 20:17
    Permalink

    Eu consegui fechar a div, agora preciso colocar um delay pode me ajudar? não quero que seja instantâneo, quero que apareça depois de alguns segundos.

    Resposta
    • 25 de março de 2018 em 17:42
      Permalink

      Fala Fernando,

      faça uma pequena alteração no código:

      setTimeout(function(){
      // deslocamento do banner
      $banner.animate({ left: ($conteudo /4)}, 900).show();
      // chamada da funcao que fará a contagem
      contador();	
      // setando o tempo de execução do banner
      setTimeout(fechar, $tempo*1000);
      }, 4000);
      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *