Opa, post rápido pessoal. Um script pronto.
Descrição: Sistema simples para exibição
de destaques como os desse
site. Onde aparece determinado destaque quando se clica nele, ou mudando
sozinhos através de timeout.
Versão: 1.0
Testado em: Firefox 1.5 ; Internet Explorer 6.0 ; Opera 8.5
Postado originalmente em: fórum
iEvolution
O código está com estilização visual básica.
Melhore-o conforme sua necessidade.
<!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>Destaques by Micox</title>
<!--
Nome: Destaques com timeout
Descrição: Sistema simples para exibição de destaques
como os do www.imasters.com.br. Onde aparece determinado destaque quando se
clica nele, ou mudando sozinhos através de timeout.
Versão: 1.0
Autor: Micox / Náiron JCG
Testado em: Firefox 1.5; Internet Explorer 6.0; Opera 8.5
-->
<style>
* { margin:0; padding:0;}
#destaques { width:300px; height:200px; border:1px solid black; overflow:
hidden;}
#destaques ul { height:30px; list-style:none; text-align:center; float:right;}
#destaques ul li{ float:left; width:20px; height:20px; border:1px solid blue;
margin:2px; cursor:pointer;}
#destaques div { clear:both; height:170px; display:none; /* todas escondidas
por default. O JS que irá exibi-las. */}
#destaques div img { float:left; width: 140px; height:140px; border:1px solid
black; margin:5px; }
#destaques .exibe { display:block;}
</style>
<script>
var atual=1; //esta var guarda o valor que tá sendo exibido agora.
var timeloop; //guardará o setInterval
function 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)",3000);
}
</script>
</head>
<body onload="iniciaAutomatico()">
<div id="destaques">
<ul>
<li onclick="muda(this.innerHTML); clearInterval(timeloop)">01</li>
<li onclick="muda(this.innerHTML); clearInterval(timeloop)">02</li>
<li onclick="muda(this.innerHTML); clearInterval(timeloop)">03</li>
<li onclick="muda(Number(atual)-1); clearInterval(timeloop)"><</li>
<li onclick="muda(Number(atual)+1); clearInterval(timeloop)">></li>
</ul>
<div id="dest_01" class="exibe">
<img src="http://www.alteregos.blogger.com.br/seu%20madruga%20sorrindo.JPG" />
<h3>Destaque 1</h3>
<p> Visite o <a href="http://elmicox.blogspot.com">blog
do micox</a>: Javascript, AJAX, Webstandards, CSS, DOM, XML , PHP, ASP,
HTTP, exemplos práticos e outras coisas mais...</p>
</div>
<div id="dest_02">
<img src="http://chbr.manchete.net/madruga.jpg" />
<h3>Destaque 2</h3>
<p>Visite o <a href="http://forum.ievolution.com.br">fórum
iEvolution</a>: Suas dúvidas respondidas com qualidade e democracia.</p>
</div>
<div id="dest_03">
<img src="http://i.esmas.com/image/0/000/003/850/quico20.jpg" />
<h3>Destaque 3</h3>
<p>E é pra visitar esses dois links que
eu passei mermo!</p>
</div>
</div>
</body>
</html>
Té a próxima.
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
Muito bom cara!
ResponderExcluirEsse provavelmente vou ter de usar! rsrs
Tá ai uma coisa que eu não tinha pensado ainda "como foi feita a aquela sessão de destaques do imasters", tá ai a resposta!
Abraços!
show cara!
ResponderExcluirsempre tive vontade de saber como funciona!
abraços!
Olha só que legal.
ResponderExcluirUm exemplo deste script está na index do sosdesigners.
Aqui você vê apenas o destaque em funcionamento no sosdesigners.
Valeu pelos caras terem mantido os créditos :)
Cara vc arrepiou, valeu vo colocar no meu site agora, show de bola
ResponderExcluirBeleza, Valeus!
ResponderExcluir//só não gostei desse papo de 'dar arrepios' em macho hehe, sai fora.
Este comentário foi removido pelo autor.
ResponderExcluirMuito bom o código, exatamente o que eu procurava. Só não entendi direito onde eu ponho o timeout pra automatizar a rotatividade.
ResponderExcluirOlá cara, você altera a rotatividade dentro da função iniciaAutomatico. Lá tem o setInterval, é só você colocar o timeout que quer.
ResponderExcluir