( ((phabyo)) ) 0 Denunciar post Postado Maio 1, 2007 Pessoal, Estava pensando em fazer uma galeria de fotos em slide-show com legenda, e o codigo que achei aqui no forum do Micox de um painel do destaques como do Imasters deu uma ideia boa. Tentei mudar o codigo e tal, mais está faltando uma coisa, posicionar as setas de 'anterior' e 'proximo' na mesma linha e altura da legenda que fica em baixo da imagem, se alguém puder dar uma olhada e concertar, ficará de grande ajuda ou indicar outro. Segue o cod é só copiar e colar em um bloco de notas, salvar como html que funciona. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Fotos e legendas</title><!--Original: Micox/Náiron JCG - Imasters--><style>* { /*ESPAÇAMENTO DO CONTEúDO NO BROWSER*/ margin:0; padding:0;}#destaques { /*TODO O DESTAQUE*/ width:300px; height:210px; border:1px solid black; overflow: hidden;}#destaques ul { /*ÁREA DOS BOTÕES ANTERIOR E PRÓXIMO*/ float:right; height:30px; list-style:none; text-align:center;}#destaques ul li{ /*ÁREA DOS BOTÕES ANTERIOR E PRÓXIMO*/ float:left; width:20px; height:20px; border:1px solid red; margin:2px; cursor:pointer;}#destaques div { /*OUTRAS IMAGENS ficarão todas escondidas por default. O JS que irá exibi-las.*/ clear:both; height:170px; display:none;}#destaques div img { /*AREA DA IMAGEM*/ float:left; width: 285px; height:140px; border:1px solid black; margin:5px; }#destaques .exibe { /*classe .exibe*/ display:block;}/**/#destaques div h1,#destaques div h2, #destaques div h3 {/*Titulo do destaque em baixo da foto*/ font:bold 12px 'Trebuchet MS', Arial, Helvetica, sans-serif; margin:5px; border:1px solid black; width:235px;}/**/</style><script>var atual=1; //esta var guarda o valor que tá sendo exibido agora.var timeloop; //guardará o setIntervalfunction muda(qual){ /*** função que altera a div que é exibida ***/ //divs que estão dentro do destaques colocadas num array var divs = document.getElementById("destaques").getElementsByTagName("div"); //formatando o qual var qual_num = Number(qual); if (qual_num<1){ qual_num = divs.length;} else if (qual_num>divs.length) { qual_num = 1;} //colocando o zero antes se for necessário if (qual_num<10) {qual = "0" + qual_num} else { qual = qual_num }; //voltando a classe de todas para o padrão que é vazio (resetando) for (var i=0;i<divs.length;i++){ divs[i].className = "";} //aplicando a classe '.exibe' na que for pra exibir document.getElementById("dest_"+qual).className = "exibe"; atual = qual_num; //setando o atual}function iniciaAutomatico(){ timeloop = setInterval("muda(Number(atual)+1)",6000);}</script></head><body onload="iniciaAutomatico()"><div id="destaques"> <div id="dest_01" class="exibe"> <img src="http://www.alteregos.blogger.com.br/seu%20madruga%20sorrindo.JPG" /> <h3>Frase 1 - 1234567891011121314151617</h3> </div> <div id="dest_02"> <img src="http://chbr.manchete.net/madruga.jpg" /> <h3>Frase 2 - 1234567891011121314151617</h3> </div> <div id="dest_03"> <img src="http://i.esmas.com/image/0/000/003/850/quico20.jpg" /> <h3>Frase 3 - 1234567891011121314151617</h3> </div> <ul> <li onclick="muda(Number(atual)-1); clearInterval(timeloop); iniciaAutomatico();"><</li> <li onclick="muda(Number(atual)+1); clearInterval(timeloop); iniciaAutomatico();">></li> </ul></div></body></html> Valeuuuuu. Compartilhar este post Link para o post Compartilhar em outros sites
Maujor 144 Denunciar post Postado Maio 1, 2007 #destaques ul { /*ÁREA DOS BOTÕES ANTERIOR E PRÓXIMO*/ float:right; position:relative; top:-25px; left:240px; demais regras... } Compartilhar este post Link para o post Compartilhar em outros sites
( ((phabyo)) ) 0 Denunciar post Postado Maio 2, 2007 Boaaa Masters!! Valeuuuu, já resolveu meu problema. Pessoal, surgiu outro probleminha. <li onclick="muda(Number(atual)-1); clearInterval(timeloop); iniciaAutomatico();"><</li> Teoricamente, limpa o intervalo de tempo de 6 segundo, e na sequencia deveria iniciar a contagem de novo (essa parte coloquei pois sem ela não teria mais a passagem de uma foto para outra), só que a soma de tempo as vzs dá errado, em vez de ficar 6 segundos mostrando a foto fica 2 seg ou 3 ou 4, pq ela não zera (acho eu). Se alguém puder ver pq acontece isso, ou se passar o topico pra JS, acho que ali que está o problema. Valeuuuu. Compartilhar este post Link para o post Compartilhar em outros sites
webflex 0 Denunciar post Postado Maio 2, 2007 Olá, Isso ja é problema de seu codigo em JavaScript, poste sua duvida na secçao correspondente. Cumps [*] Compartilhar este post Link para o post Compartilhar em outros sites
