Ir para conteúdo

POWERED BY:

Arquivado

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

gnomex

"quadro de noticias"

Por , em Desenvolvimento frontend

Recommended Posts

gnomex    0

gnomex
Postado

olá, desculpem se estou postando em lugar errado,

gostaria de fazer aqueles quadros de noticias rotativas q tão usando bastante agora,

um exemplo é no site do baixaki, ou no ig enfim varios sites utilizam

tentei salvar a pagina para ver se eu aprendia a fazer mas não deu certo hehe

alguem pode me ajudar?

abraço

valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tenta ser um pouco mais específico..

 

Do que você precisa fazer:

-> Oque você já fez?

-> Oque você não sabe fazer?

 

Vamos listar alguns passos:

-> você pretende pegar as notícias de um banco de dados? Ou terão poucas e você vai querer mudar isso no próprio HTML?

prefere um XML ou coisa parecida ?

-> Qual linguagem dinâmica você conhece, nesse caso?

-> A troca é feita em Javascript.. sabe programar ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

gnomex

respondeu o que o William disse ficar facil te ajudar!

 

se souber algum parecido para nos mostrar ajuda mais ainda!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

gnomex    0

gnomex
Postado

oi desculpe a demora tive fora

 

assim, eu não exatamente como se chama, mas eu queria algo bem simples mesmo

pq to meio enferrujado, faz muito tempo que não mexo, queria fazer um quadro de noticias

como os que sitei, pode ser em html mesmo q eu vou alterando "na mão" hehehe

eu procurei como louco e não achei, até tentei copiar as paginas para ver se descobria como era

 

eu não fiz nada ainda e pelo jeito não sei fazer hehehe

 

desculpe o encomodo ae pessoal

valeu novamente

abraço

 

obs exemplos q eu vi era nesses dois sites no ig e no baixaki

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

isso é feito via javascript

 

eu não farei para você pois a intenção é te ajudar e não intregar pronto

 

bom aqui vai um inicio

 

<div id="noticia">
	 <div id="box1"></div>
	 <div id="box2"></div>
	 <div id="box3"></div>
	 <div id="box4"></div>
	 <div id="box5"></div>
</div>

você deve pegar o elemento pelo id, e esconder todos, só exibir o proximo

 

tento dúvidas volte a postar

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

explica ai .. o que você quer ?

ele já explicou, ele quer uma caixa igual a da pagina inicial do ig...

 

onde fica rolando as noticias

 

gnomex

 

tendo dúvidas volte a postar!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

o William Bruno fez esse script e eu modifiquei

 

você pode substituir os div por ul e li

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
body {
	margin: 200px;
}
#noticias div {
	display: none;
	height: 150px;
	width: 200px;
	background-color: #ff0;
	border: 1px ridge #f00;

}
</style>
<script type="text/javascript">
// por William Bruno 
// modificado por Aprendiz CSS
// http://forum.imasters.com.br/index.php?showtopic=324735

window.onload=function(){
	var el = document.getElementById("noticias").getElementsByTagName("div");
	
	var j = 1;	
	for( var i=0; i < el.length; i++ ) {
		el[i].onclick = function() {
			if(j > el.length-1) // condição para retornar à primeira notícia.
				j = 0;
				
			this.style.display = 'none'; //esconde a notícia atual
			el[j].style.display = 'block'; //mostra a próxima
			j++;
		}
	}
}
</script>
</head>
<body>
<div id="noticias">
	<div style="display: block">Noticia 1</div>
	<div>Noticia 2</div>
	<div>Noticia 3</div>
	<div>Noticia 4</div>
	<div>Noticia 5</div>
</div><!-- /noticias -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Gostei desse ai...

complementando a dúvida do amigo,como faço pra ele ficar trocando de tantos em tantos segundos ????

você dee implementar o comando setTimeout

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o William Bruno fez esse script e eu modifiquei

 

você pode substituir os div por ul e li

Não entendi o porque de tirar os UL LI e por DIV... explica isso ai Aprendiz ^^

Bom.. eu postei... modifiquei.. não fiquei feliz, por isso apaguei meu post.. mas já que você postou e modificou meu código... vamos brincar nele:

<script type="text/javascript">
// por William Bruno 
// modificado por Aprendiz CSS
// http://forum.imasters.com.br/index.php?showtopic=324735

window.onload=function(){
	var el = document.getElementById("noticias").getElementsByTagName("li");
	
	var j = 1;	
	for( var i=0; i < el.length; i++ ) {
		el[i].onclick = function() {
			if(j > el.length-1) // condição para retornar à primeira notícia.
				j = 0;
				
			this.style.display = 'none'; //esconde a notícia atual
			el[j].style.display = 'block'; //mostra a próxima
			j++;
		}
	}
	var nav = document.getElementById("nav").getElementsByTagName("li");
	
	
	for( var i=0; i < nav.length; i++ ) {
		nav[i].onmouseover = function(){
			this.style.backgroundColor = '#f0f'; // muda o bg ao passar o mouse
			for( var i=0; i < el.length; i++ ) { // procura a notícia atual que está ativa
				if( el[i].style.display == 'block' )
					el[i].style.display = 'none'; // esconde ela para mostrar a que o mouse estiver por cima
			}
				
			var cont = this.getAttribute("id"); // não encontrei forma melhor =X
			for( var i=0; i < el.length; i++ )
				el[1].style.display = 'none';
				
			el[cont].style.display = 'block'; // mostra a notícia atual, ao passar o mouse
			
		}//fecha mouseOver
		
		nav[i].onmouseout = function(){
			this.style.backgroundColor = '#fff';
			for( var i=0; i < el.length; i++ ) 
				el[i].style.display = 'none';
					
			var cont = this.getAttribute("id"); // não achei forma melhor para pegar parâmetro e fazer ligação entre lista e noticia
			el[cont].style.display = 'block'; // mantém a notícia atual mesmo ao tirar o mouse
			
		}//fecha mouseOut
		
	}
}// carregando tudo no onLoad, não obstrutivo


</script>
Fiz um menuzinho parecido com o do Yahoo, onde você ao clicar/passar o mouse, ele mostra a notícia...

Enfim... não manjo de Javascript.. mas tá legal essa brincadeira... ^^

 

Bora mover o tópico? ou alguém mais se habilita à usar a função setTimeOut ?

Ainda estou estudando aqui :lol:

 

Confira a marcação HTML e ele rodando online... a dificuldade aqui é o Javascript.. ^^

http://www.cenasordidas.hbe.com.br/exemplo...rRotatorio.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Bom coloquei div porque se a pessoa quiser colocar elementos que não podem na lista ficaria errado.

por exemplo se um formulario.

sei que não é muito comum, mas é possivel, vai saber...

a solução com li é melhor, mas semântica

Implementei o setTimeout, porém tem um problema, se você deixar o mouse parado sobre alguma noticia, ele deveria parar, isso eu não fiz, mas acho que alguem conseguirá fazer...

segue o código para melhoras

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Versão 2.0 </title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style: none;
}
body {
	margin: 200px;
}
#noticias {
	float: left;
}
#noticias li {
	display: none;
	height: 150px;
	width: 200px;
	background-color: #ff0;
	border: 1px ridge #f00;

}
#nav {
	border: 1px ridge #f00;
	width: 150px;
	float: left;
}
#nav li{
	height: 28px;
	border: 1px ridge #f00;
	text-align: center;
	line-height: 28px;
}

#noticias li.bloco {
	display: block;
}


</style>
<script type="text/javascript">
// por William Bruno 
// modificado por Aprendiz CSS
// http://forum.imasters.com.br/index.php?showtopic=324735

function muda(){
	var el = document.getElementById("noticias").getElementsByTagName("li");
	var proximo = 0;	
	var atual;
	for( var i=0; i < el.length; i++ ) {
		if( el[i].className == "bloco" ) {
			atual = i;
			el[i].className = "";
			break;
		}
	}
	proximo = atual + 1;
	if(proximo > el.length-1) // condição para retornar à primeira notícia.
		proximo = 0;
	el[proximo].className = "bloco";
	setTimeout("muda()", "2000");
}

window.onload=function(){
	setTimeout("muda()", "2000");
	var el = document.getElementById("noticias").getElementsByTagName("li"); 
	var nav = document.getElementById("nav").getElementsByTagName("li");
	
	for( var i=0; i < nav.length; i++ ) {
		nav[i].onmouseover = function(){
			this.style.backgroundColor = '#f0f'; // muda o bg ao passar o mouse
			for( var i=0; i < el.length; i++ ) { // procura a notícia atual que está ativa
				if( el[i].className == 'bloco' )
					el[i].className = ''; // esconde ela para mostrar a que o mouse estiver por cima
			}
				
			var cont = this.getAttribute("id"); // não encontrei forma melhor =X
			for( var i=0; i < el.length; i++ )
				el[1].className = '';
				
			el[cont].className = 'bloco'; // mostra a notícia atual, ao passar o mouse
			
		}//fecha mouseOver
		
		nav[i].onmouseout = function(){
			this.style.backgroundColor = '#fff';
			for( var i=0; i < el.length; i++ ) 
				el[i].className = '';
					
			var cont = this.getAttribute("id"); // não achei forma melhor para pegar parâmetro e fazer ligação entre lista e noticia
			el[cont].className = 'bloco'; // mantém a notícia atual mesmo ao tirar o mouse
			
		}//fecha mouseOut
		
	}
}// carregando tudo no onLoad, não obstrutivo
</script>
</head>
<body>
<div id="quadro">
	<ul id="noticias">
		<li class="bloco">Noticia 1</li>
		<li>Noticia 2</li>
		<li>Noticia 3</li>
		<li>Noticia 4</li>
		<li>Noticia 5</li>
	</ul><!-- /noticias -->
	<ul id="nav">
		<li id="0">Notícia 1</li>
		<li id="1">Notícia 2</li>
		<li id="2">Notícia 3</li>
		<li id="3">Notícia 4</li>
		<li id="4">Notícia 5</li>
	</ul>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

jeffersonpd    0

jeffersonpd
Postado

Tenta ser um pouco mais específico..

 

Do que você precisa fazer:

-> Oque você já fez?

-> Oque você não sabe fazer?

 

Vamos listar alguns passos:

-> você pretende pegar as notícias de um banco de dados? Ou terão poucas e você vai querer mudar isso no próprio HTML?

prefere um XML ou coisa parecida ?

-> Qual linguagem dinâmica você conhece, nesse caso?

-> A troca é feita em Javascript.. sabe programar ?

 

Minha duvida e igual a do gnomex lá de cima , mais eu gostaria de saber como que faz pegando as noticias do banco de dados?

 

eu tenho todo esquema das noticias tem imagem e titulo agora gostaria de colocar essas noticias dentro de um quadro de noticias rotativas se é que vcs me entende?

 

olha as noticias então aqui Noticias teste

 

desde já obrigado.

Compartilhar este post

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

Informação importante

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

  Aceito