Sistema de notícias da UOL

walterDFF · Janeiro 1, 2008

Olá pessoal estou procurando algum script parecido com a que a uol usa no site.. aquele efeito de transição de imagem é muito bem feito.. olhei pelo código fonte só achei um poko complicado porque não programador se alguém tiver algum código parecido ou mais simples iria me ajudar muito! no caso não precisa do pause e nem os botões de ir adiante ou voltar!

desde já grato!

abraço a todos!

Edultra · Janeiro 1, 2008

Veja o codigo fonte deles:

<form name="form_cr" action="" id="painel-conteudo"><textarea name="select_cr" cols="0" rows="0">Eduardo Knapp/Folha Imagem|http://home.img.uol.com.br/0712/j/31saosilvestre.jpg|Veja as principais imagens da corrida de São Silvestre|http://click.uol.com.br/?rf=hu-hn-fotos&u=http://esporte.uol.com.br/album/071231saosilvestre2_album.jhtm?abrefoto=12|http://home.img.uol.com.br/h0/i_fotob.gif AP|http://home.img.uol.com.br/0712/d/31perola.jpg|Casal encontra rara pérola roxa em prato de frutos do mar|http://click.uol.com.br/?rf=hu-hn-fotos&u=http://noticias.uol.com.br/ultnot/album/071231_album.jhtm?abrefoto=16|http://home.img.uol.com.br/h0/i_fotob.gif Tim Wimborne/Reuters|http://home.img.uol.com.br/0712/j/31anonovoiraque.jpg|Iraque celebra o Ano Novo; confira a festa pelo mundo|http://click.uol.com.br/?rf=hu-hn-fotos&u=http://noticias.uol.com.br/ultnot/album/071231anonovo_album.jhtm?abrefoto=30|http://home.img.uol.com.br/h0/i_fotob.gif |||http://click.uol.com.br/?rf=hu-hn-fotos&u=|AFP|http://home.img.uol.com.br/0712/d/31ettore.jpg|Morre Ettore Sottsass, um dos mestres do design italiano|http://click.uol.com.br/?rf=hu-hn-fotos&u=http://diversao.uol.com.br/ultnot/afp/2007/12/31/ult32u18392.jhtm|</textarea></form>

Agora o js:

function startSlide(){ loadImages();if(!paused) timeoutId=setTimeout('changeImg(1)',6000);} function initialize(){timeoutId=0;textareaContent=d.form_cr.select_cr.value.split(/[rn]/i);Item = new Array();for(x=0,y=0;x<textareaContent.length;x++){ 	if(textareaContent[x].length>30) Item[y++]=textareaContent[x].split('|');	}for(i=Item.length-1;i>=0;i--){	Item[i][0]=Item[i][0].replace(/([ ntr])+/, " ");	Item[i][4]=(Item[i][4].length<3) ? '' : '<img src="'+Item[i][4]+'" border="0" style="margin-left:4px;" />';	if(Item[i][1].length<3||Item[i][3].length<3||Item[i][2].length<3||Item[i][0].length<2) delItem(Item,i);	}if(Item.length==1) d.write('<style>#anterior,#proximo,#pause{visibility:hidden;}</style>');atual = Math.random().toString().substring(2,6) % Item.length;} function startPanel(){usaCredito = '';initialize();if(arguments.length>0){	if(!isNaN(arguments[0])) atual = arguments[0];	}if(paused) {imgpause='on'; altpause='alt="Ligar" title="Ligar"';}else {imgpause='off'; altpause='alt="Parar" title="Parar"';}d.write('<div id=banner-rotativo></div><div id="to-blend">'+usaCredito+'<a href="java script:goURL()"><img src="'+Item[atual][1]+'" id="imgslide" name="img1" border="0" title="'+Item[atual][0]+'" alt="'+Item[atual][0]+'"></a>');d.write('<h2><a href="java script:goURL()" id="p-link"><span id="txt1">'+Item[atual][2]+'</span><span id="icon-area">'+Item[atual][4]+'</span></a></h2></div>');d.write('<div id="prox-ant"><a href="java script:void(0)" id="anterior" onclick="if(okToGo)changeImg(-1)"><img src="http://home.img.uol.com.br/h2/botao-anterior.gif" border="0" /></a><img src="http://home.img.uol.com.br/h2/botao-pause1-'+imgpause+'.gif" onclick="pauseSlide()" id="pause" '+altpause+' />');d.write('<a href="java script:void(0)" id="proximo" onclick="if(okToGo)changeImg(1)"><img src="http://home.img.uol.com.br/h2/botao-proxima.gif" border="0" /></a><div id="banner-painel"><img src=http://img.uol.com.br/pub_h_120_b.gif style="margin-left:5px"><a href=java script:void(0) onclick=closeBanner() style="display:inline;"><img src=http://es.i.uol.com.br/moda/album/banner-fechar.gif style="margin:4px 0 0 14px"></a></div></div>');} function pauseSlide(){if(paused){	$('pause').src='http://home.img.uol.com.br/h2/botao-pause1-off.gif';	$('pause').title='Parar'; $('pause').alt = 'Parar';	d.cookie="homeUOLpause=0;domain=.uol.com.br;expires=Thu, 2 Aug 1970 20:47:11 UTC;"; 			paused=false;	startSlide();}else{	clearTimeout(timeoutId);	d.cookie="homeUOLpause=1;domain=.uol.com.br;expires=Thu, 2 Aug 2222 20:47:11 UTC;"; 		$('pause').src='http://home.img.uol.com.br/h2/botao-pause1-on.gif';	$('pause').title='Ligar'; $('pause').alt = 'Ligar';	paused = true;} }var okToGo=false;var paused=(d.cookie.indexOf('homeUOLpause=1')!=-1) ? true : false;onload=startSlide;

Com o site com o efeito fica mais facil realmente pra achar e adaptar ao nosso uso o script, agora existem outros efeitos de troca de imagem e passo a passos aqui no portal veja estes:

Exibição de Fotos Aleatórias

Galeria de imagens dinâmica com PHP, Spry e o Lightbox 2

Galeria de imagens dinâmica com PHP, Spry e o Lightbox 2 - Conclusão

Galeria de fotos com efeito Lightbox

São varios passo a passo com efeitos e tipos de galerias e imagens utilizando javascript, espero ter lhe ajudado.