Javascript – Notícias Dinâmicas Mario S.A.M.
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:
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!
