Album de fotos
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">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"](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"](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"](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.
Discussão (3)
Carregando comentários...