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: [ [" 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> ], 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><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.
Espero que tenham gostado, e participem do sorteio do layout: http://tutosrafaela.blogspot.com.br/2015/07/sorteio-layout-personalizado_10.html
Nenhum comentário:
Postar um comentário