Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luiz da Matta

Noticias dinamica

Por , em Javascript

Recommended Posts

Luiz da Matta    0

Luiz da Matta
Postado

Olá amigos, mais uma vez eu aqui contando com a ajuda gratuita de voces (boa vontade), ok. Estou criando um portal de noticias e gostaria muito implementar em meu site uma caixa de noticias dinamicas que busquem as informacoes no banco mysql... Já procurei bastante pela NET por tutoriais, modelos prontos mas em todos a enfase está sobre a administracao do conteudo, inserir os dados no banco, essa não seria a minha dificuldade, logo eu apenas quero saber como fazer para criar uma caixa que muda uma foto de fundo e exibe um mini-texto para cada foto (no maximo 5 noticias a serem exibidas nessa caixa) e que elas fiquem passando de uma pra outra automaticamente porém quero que tenha botões de passar para a proxima e voltar para anterior... o mais próximo que conseguir foi esse aqui... mas não achei como adicionar dados do banco e só tem o botão "proximo"... Desde já obrigado! Exemplos de como eu quero o meu (http://www.uol.com.br) e (http://br.yahoo.com)

<html>
<head>
<title>Bloco de Notícias</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}
body, td, th,table {
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}


.alterado{color:blue; background-color:#cccccc;}
.normal{color:black;}

</style>
</head>

<body onLoad="troca('2')">
<script type="text/javascript">
inicial = 0;

imagens = new Array();
urls = new Array();
textos = new Array();

// imagens[1] está associado a urls[1] que está associado a textos[1]
// etc...
imagens[0] = ""; // manter vazio
imagens[1] = "img/foto1.jpg";
imagens[2] = "img/foto2.jpg";
imagens[3] = "img/foto3.gif";
imagens[4] = "img/foto4.jpg";
imagens[5] = "img/foto5.jpg";

urls[0] = ""; // manter vazio
urls[1] = "url para 1ª";
urls[2] = "url para 2ª";
urls[3] = "url para 3ª";
urls[4] = "url para 4ª";
urls[5] = "url para 5ª";

textos[0] = ""; // manter vazio
textos[1] = "texto para 1ª";
textos[2] = "texto para 2ª";
textos[3] = "texto para 3ª";
textos[4] = "texto para 4ª";
textos[5] = "texto para 5ª";

function troca(valor) {
passado = valor
if(passado==1) {
clearTimeout(tempo)
tempo = setTimeout("troca('1')", 5000);
} else {
tempo = setTimeout("troca('2')", 5000);
}
if(inicial==5) {
inicial = 0;
}
for(var i = 1; i < 6; i++) {
document.getElementById("span_"+i).style.color='black';
document.getElementById("span_"+i).className='normal';
}
inicial++;
document.getElementById("span_"+inicial).className='alterado';
document.getElementById("imagem").src=imagens[inicial];
document.getElementById("link").href=urls[inicial];
document.getElementById("textos").innerHTML=textos[inicial];
}
</script>
<body>

<a href="" id="link"><img src="img/foto1.jpg" name="imagem" height="300" border="2" id="imagem" with="300"></a>
<br>
<span id="textos"></span>

<br>

<span id="span_1" class="alterado">1</span>
<span id="span_2" class="normal">2</span>
<span id="span_3" class="normal">3</span>
<span id="span_4" class="normal">4</span>
<span id="span_5" class="normal">5</span>
<input type="button" value="avançar" onClick="return troca('1')">
 
</body> 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz da Matta    0

Luiz da Matta
Postado

Se você sabe como fazer com as imagens fixas no html.

Basta uma linguagem de programação para fazer a parte de consulta a banco de dados. Programa em alguma linguagem?

 

Abraços...

 

Bem eu conheço um pouco de PHP mas se voce testou o codigo acima verá que só dá pra passar para a PROXIMA noticia, não sei como fazer o botao VOLTAR nem o botao PAUSAR a noticia... Quanto a consulta no banco de dados via PHP eu consigo dá um jeito... Parecido mesmo com o da UOL.COM.BR

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito