tadarank afiliados

26 julho, 2006

Script - Destaques com timeout

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)">&lt;</li>
    <li onclick="muda(Number(atual)+1); clearInterval(timeloop)">&gt;</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.

8 comentários:

  1. Muito bom cara!
    Esse 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!

    ResponderExcluir
  2. show cara!
    sempre tive vontade de saber como funciona!

    abraços!

    ResponderExcluir
  3. Olha só que legal.
    Um 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 :)

    ResponderExcluir
  4. Cara vc arrepiou, valeu vo colocar no meu site agora, show de bola

    ResponderExcluir
  5. Beleza, Valeus!
    //só não gostei desse papo de 'dar arrepios' em macho hehe, sai fora.

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. Muito bom o código, exatamente o que eu procurava. Só não entendi direito onde eu ponho o timeout pra automatizar a rotatividade.

    ResponderExcluir
  8. Olá cara, você altera a rotatividade dentro da função iniciaAutomatico. Lá tem o setInterval, é só você colocar o timeout que quer.

    ResponderExcluir

Resultado! Concursos