Creditos: Art Design Encomendas
1. Primeiramente, claro, crie as imagens que deseja que apareçam no slide. Lembrando que todas devem ter altura e largura iguais.
2. Cole isso depois de <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#myslideshow{ /*sample CSS quinze for demo*/
}
</style>
E cole isso logo abaixo.
<script src="http://static.tumblr.com/ywlup7y/MWKlz5boa/slideshowbyquinze.js" type="text/javascript"> /*********************************************** * Translucent slideshow- (c) Dynamic Drive ( dynamicdrive.com/) * Tutorial e códigos adaptados/hospedados por Sarah S ( quinzeparameianoite.tumblr.com ) * Não retire esses créditos. ***********************************************/ </script> <script type="text/javascript"> var translideshow1=new translideshow({ wrapperid: "myslideshow", //div do slideshow dimensions: [LARGURAIMAGEM, ALTURAIMAGEM], //tamanho não precisa por "px" somente o numero. Deve ter o tamanho das imagens. imagearray: [ ["urlprimeiraimagem"], ["urlsegundaimagem"],["urlterceiraimagem"], ["urlquartaimagem"],["urlquintaimagem"], ["urlsextaimagem"] //jamais retire isso! se quiser acrescentar fotos, acrescente em cima, jamais em baixo ], displaymode: {type:'auto', pause:2000, cycles:80, pauseonmouseover:true}, orientation: "h", //Coloque H para slide direita/esquerda e V para esquerda/direita persist: true, //continuar a partir do ultimo slide slideduration: 800 //duração de cada slide, escolha o numero ou deixe esse ( milisegundos ) }) </script>
3. Agora cole esse código antes de </body>.
<div style='position:absolute; overflow:hidden; top:20px; left:30px;'> <div id="myslideshow"></div> </div>
4. E por último e mais fácil, mude o 20 (cima) o 30 (esquerda) para posicionar o slide no header.
é automatico?
ResponderExcluir