Ir para conteúdo

POWERED BY:

Arquivado

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

formigoni

Notícias

Por , em Javascript

Recommended Posts

formigoni    0

formigoni
Postado

Bom dia, preciso de uma ajuda dos feras de plantão.

Como posso criar um esquema desse de notícias, vejam o site na parte superior esquerda.

 

http://www.odiariomaringa.com.br/

 

Procurei alguns exemplos, mas nada ficou legal e esse cabe exatamente no que preciso.

 

Valeu e fiquem na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

da uma olhada

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script>
var  pos = 0;
var text,images;
var proc = null;

text = new Array();
images = new Array();

text[0] = "teste otata";
images[0] = "teste.jpg";
text[1] = "123 testando";
images[1] = "teste2.jpg";
text[2] = "mais um teste";
images[2] = "teste3.jpg";

function proxima(){
	var img = document.createElement('img');
		document.getElementById("img").innerHTML = "";
	if(this.pos == text.length - 1){	
	img.width = '100';
	img.src = this.images[0];
	document.getElementById("img").appendChild(img);
		document.getElementById("texto").innerHTML = text[0];
		this.pos = 0;
	}else{
	img.width = '100';
	img.src = this.images[pos + 1];
	document.getElementById("img").appendChild(img);
		document.getElementById("texto").innerHTML = text[pos + 1];
		this.pos++;
	}
}
function anterior(){
	var img = document.createElement('img');
	document.getElementById("img").innerHTML = "";
	if(pos == 0){
	img.width = '100';
	img.src = this.images[text.length - 1];
	document.getElementById("img").appendChild(img);
		document.getElementById("texto").innerHTML = text[text.length - 1];
		this.pos = text.length -1;
	}else{
	img.width = '100';
	img.src = this.images[pos - 1];
	document.getElementById("img").appendChild(img);
		document.getElementById("texto").innerHTML = text[this.pos - 1];
		this.pos--;
	}	
}
function initInterval(func){
	clearInterval(this.proc);
	this.proc = setInterval(func,"2000");
}
function pausar(){
	clearInterval(this.proc);
}

</script>

<div>
	<div id="img"><img src="teste.jpg" width='100'/></div>
	<label id="texto" style="font-weight : bold;">teste otata</label>
</div>
<a onClick="anterior();initInterval(anterior);" >Anterior</a>
<a onClick="pausar();" >Pausar</a>
<a onClick="proxima();initInterval(proxima);" >Proxima</a>
<script>
initInterval(proxima);
</script>
ai você da uma adaptada...

 

t+

Compartilhar este post

Link para o post
Compartilhar em outros sites

formigoni    0

formigoni
Postado

Olá bom dia, muito obrigado pela dica.

Você teria algo buscando os dados de um banco de dados, já abusando muito da sua generosidade.

Valeu e fica na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

cara dei uma facilitada no cod para você usar..

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style>
.hide{
	display:none;
}
.show{
	display:block;
}
</style>
<script>

var proc = null;
var pos = 0;

function getValidChilds(node){
	var arrNodes = new Array();
	var childs = node.childNodes;
	for(i=0;i<childs.length;i++){
		if(childs[i].nodeName == 'DIV'){
			arrNodes.push(childs[i]);
		}
	}
	return arrNodes;
}
function proxima(){
	
	var news = getValidChilds(document.getElementById("news"));	
	if(this.pos == news.length - 1){	
	news[this.pos].className = 'hide';
	news[0].className = 'show';
		this.pos = 0;
	}else{
	news[this.pos].className = 'hide';
	news[this.pos + 1].className = 'show';
		this.pos++;
	}
}
function anterior(){
	var news = getValidChilds(document.getElementById("news"));	
	if(pos == 0){
	news[0].className = 'hide'
	news[news.length - 1].className = 'show'
		this.pos = news.length -1;
	}else{
	  news[this.pos].className = 'hide';
	news[this.pos - 1].className = 'show';
		this.pos--;
	}	
}
function initInterval(func){
	clearInterval(this.proc);
	this.proc = setInterval(func,"2000");
}
function pausar(){
	clearInterval(this.proc);
}

</script>

<div id='news'>
	<div id='new1'>
		<div id="img"><img src="teste.png" width='100'/></div>
		<label id="texto" style="font-weight : bold;">teste otata</label>
	</div>
	<div id='new2' class='hide'>
		<div id="img"><img src="teste2.jpg" width='100'/></div>
		<label id="texto" style="font-weight : bold;">123 testando</label>
	</div>
	<div id='new3' class='hide'>
		<div id="img"><img src="teste3.jpg" width='100'/></div>
		<label id="texto" style="font-weight : bold;">mais um teste</label>
	</div>
</div>
<a onClick="anterior();initInterval(anterior);" >Anterior</a>
<a onClick="pausar();" >Pausar</a>
<a onClick="proxima();initInterval(proxima);" >Proxima</a>
<script>
initInterval(proxima);
</script>

ali onde tah a <div id="news">

 

você gera com a linguager server-side as divs

 

<div id='new1'> ... <div id='new2'>....<div id='newX'>

seguindo a mesma estrutura do exemplo.. acho que fica mais facil

 

 

t+

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