Você já deve ter visto em muitos sites, principalmente em portais de notÃcias, umas caixas que ficam apresentando de forma dinâmica fotos e textos.
Vou mostrar aqui como montar uma dessas caixas de notÃcias dinâmicas usando javascript. O resultado final, ficará semelhante ao do site do UOL e do site do Ministério da Cultura.
Eu não procurei saber como foi feito nesses sites acima descritos. Talvez usem flash, talvez usem ajax, talvez usem algum framework javascript com funções para criar este efeito, não sei.
O código abaixo foi criado por mim, atendendo ao pedido de um leitor do blog, o André.
Talvez não seja a melhor das soluções, mas é uma maneira bem prática e simples de se fazer. E pode ser facilmente adaptada para qualquer necessidade. Vejamos:
<html>
<head><title>teste</title>
<script type="text/javascript">
setInterval("mudarNoticia('auto')", 5000);
var texto_noticias = new Array();
texto_noticias[0] = "aqui vc coloca as noticias";
texto_noticias[1] = "texto da noticia 1";
texto_noticias[2] = "texto da noticia 2";
texto_noticias[3] = "texto da noticia 3";
var imagem_noticias = new Array();
imagem_noticias[0] = "aqui vc coloca as imagens";
imagem_noticias[1] = "imagem1.jpg";
imagem_noticias[2] = "imagem2.jpg";
imagem_noticias[3] = "imagem3.jpg";
function mudarNoticia( noticia ) {
if ( noticia == "auto" ) {
for ( i=0; i<document.getElementsByName('op_noticia').length; i++ ) {
if ( document.getElementsByName('op_noticia')[i].checked ) {
noticia = parseInt(document.getElementsByName('op_noticia')[i].value) + 1;
}
}
if ( noticia > texto_noticias.length-1 ) noticia = 1;
document.getElementsByName('op_noticia')[noticia-1].checked = true;
}
document.getElementById("img_noticia").src = imagem_noticias[noticia];
document.getElementById("txt_noticia").innerHTML = texto_noticias[noticia];
}
</script>
</head>
<body>
aqui vai o quadro com noticias:<hr>
<table>
<tr>
<td><img id="img_noticia" src="imagem1.jpg" border="1" alt="noticia" width="150px" height="100px"></td>
</tr>
<tr>
<td id="txt_noticia">mensagem da noticia</td>
</tr>
<tr>
<td>
<input type="radio" name="op_noticia" value="1" onclick="javascript:mudarNoticia(this.value);" checked>
<input type="radio" name="op_noticia" value="2" onclick="javascript:mudarNoticia(this.value);">
<input type="radio" name="op_noticia" value="3" onclick="javascript:mudarNoticia(this.value);">
</td>
</tr>
</table>
</body>
</html>
Vou explicar rapidamente o código, apesar de estar bem fácil de entender.
Para ver funcionando basta criar 3 imagens diferentes com os nomes imagem1.jpg, imagem2.jpg e imagem3.jpg.
No código html eu criei uma tabela, que simula a caixa onde ficarão as notÃcias dinâmicas, cada linha desta tabela possui um identificador “id” ou “name” para que possa identifcar as células que serão alteradas.
Tem um campo do tipo radio, que você pode usar para pular as notÃcias e voltar no tempo que quizer. Cada clique no radio dispara a ação javascript que altera a notÃcia.
Até ai tudo bem simples de entender não é!? Agora no código javascript.
Temos 2 arrays, um contendo o texto das notÃcias e outro contendo o nome das imagens de cada notÃcia.
Temos o método setInterval que é quem faz a mágica de alterar sozinho as notÃcias de tempos em tempos, no caso 5000 significa que será a cada 5 mil miléssimos de segundo, que equivale a 5 segundos.
E por último, temos o método que faz a alteração. Começa verificando se o usuário clicou no radio para alterar a notÃcia, ou se a notÃcia esta mudando automaticamente “auto“.
Se foi clicado, simples, apenas altera o valor de img_noticia e txt_noticia indicando o valor correspondente do array.
Se foi automatico, então precisamos percorrer todos os radios de opção de notÃcias dinâmicas para verificar qual está marcado. Pegar o valor deste que está marcado e adicionar +1 para que ele possa ir para o próximo radio.
Mas antes disso, precisamos saber se acabaram as notÃcias. Se o array chegou ao final, reiniciamos a contagem do array. E por fim atualizamos os valores das células.
Como eu disse, simples, prático, e funciona! Agora basta aplicar alguns efeitos de css, algumas imagens e cores pra ficar mais do que bom.
Sucesso!
MarioSAM é faixa preta 2Dan de Taekwondo. Entusiasta do marketing online. Especulador do mercado financeiro. Projetista web com certificação SCJP da SUN. Com 10 anos de experiência em desenvolvimento de sistemas. 
Loading...
Ficou show de bola mesmo, parabens, agora sem querer abusar da sua boa vontade, você tem alguma coisa relacionada a lightbox, acho super bacana pra por no site, ainda mais que o site é de noticias local vai ficar massa.
Forte Abraço!!!
muito bom esse script….
mas como coloco link para as notÃcias???
com
??
blz junior.
cara, existem diversas maneiras de incluir link nas imagens.
vou mostrar apenas uma opção, que considero bem simples de entender,
e segue a mesma idéia do script criado.
abaixo da linha setInterval, inclua um array com os links, igual foi feito para as noticias e as imagens:
var link_noticias = new Array();link_noticias[0] = "aqui vc coloca os links";
link_noticias[1] = "http://www.mariosam.com";
link_noticias[2] = "http://www.ahomba.com";
link_noticias[3] = "http://www.lindaesteticista.com.br";
Dentro da function mudarNoticia adicione uma linha no final do metodo:
document.getElementById("url_noticia").href = link_noticias[noticia];E pra finalizar, basta incluir as tags de link < a > no código em cima da imagem:
< td >< a href="teste.html" id="url_noticia" rel="nofollow">
Essa é a única linha que deve ser alterada, as demais são incluidas.
Espero que ajude.
abs
Não entendi a parte do link?
onde incluir isso:
Olá amigo eu tentei modificar um pouco seu codigo mas nao funcionou 100% se puderes me ajudar… a ideia foi substituir o por assim no lugar do botão Radio iriam aparecer miniaturas das noticias mas só vai até a noticia 3 dai volta pra noticia 1 e para… isso no firefox, no IE nem se meche… ajuda ai! abraços
ops as tags são essas aqui
tirar essa
e colocar essa aqui
Oi Mário.
Obrigada pelo código.
Me ajuda com uma coisinha… quando executo, não aparece as imagens e já estão configuradas… Tenho que mudar alguma coisa? Obrigada.
opa meu caro no sitio do minc eles usao wordpress
e um plugin desenvolvido por eles mesmos que se chama mincheadline
q faz aquelas capas
procura pelo nome ou por xemele que foi o grupo que desenvolvel