Com o plugin cycle do jQuery é possível criar diversos tipos de slideshows, sem saber javascript, em 3 apenas minutos. Sem exagero algum, se dúvida disso, leia o post todo, depois deixe um miojo na água fervendo enquanto faz o slideshow e se queimar pode me mandar um email me xingando.
O plugin é bem leve ( 10kb ) e pode ser baixado no aqui ou no site do plugin (lá pode ter versões mais novas).
E vamos aos códigos.
Invoque os scripts dentro da tag head da sua página:
[sourcecode language="html"]
[/sourcecode]
Você pode baixar o cycle aqui e o jquery aqui.
Para as imagens não serem mostradas antes do load total da página, coloque a seguinte linha de código no seu css:
[sourcecode language="css"]
dv.pics { display: none; }
div.pics img {
height: 200px; // altura das imagens
width: 300px; // largura das imagens
overflow:hidden; // limitando a div
}
[/sourcecode]
Escreva o html:
[sourcecode language="html"]
[/sourcecode]
E depois é só brincar com as opções do cycle :
Primeiro exemplo:
[sourcecode language="js"]
[/sourcecode]
O Speed é a velocidade de transição, fx o efeito.
Além desse efeito existem mais 27 efeitos:
blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe e zoom
Segundo exemplo, com play e pause:
[sourcecode language="js"]
[/sourcecode]
Existem diversas outras opções como botão anterior e próximo, paginação, etc.
Segue abaixo a lista de opções (em inglês).
| Opção | Valor | O que faz? |
|---|---|---|
| fx | ‘fade’ | one of: fade, shuffle, zoom, scrollLeft, etc |
| timeout | 4000 | milliseconds between slide transitions (0 to disable auto advance) |
| continuous | 0 | true to start next transition immediately after current one completes |
| speed | 1000 | speed of the transition (any valid fx speed value) |
| speedIn | null | speed of the ‘in’ transition |
| speedOut | null | speed of the ‘out’ transition |
| next | null | id of element to use as click trigger for next slide |
| prev | null | id of element to use as click trigger for previous slide |
| prevNextClick | null | callback fn for prev/next clicks : function(isNext, zeroBasedSlideIndex, slideElement) |
| pager | null | id of element to use as pager container |
| pagerClick | null | callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement) |
| pagerEvent | ‘click’ | event which drives the pager navigation |
| pagerAnchorBuilder | null | callback fn for building anchor links |
| before | null | transition callback (scope set to element to be shown) |
| after | null | transition callback (scope set to element that was shown) |
| end | null | callback invoked when the slideshow terminates (use with autostop or nowrap options) |
| easing | null | easing method for both in and out transitions |
| easeIn | null | easing for “in” transition |
| easeOut | null | easing for “out” transition |
| shuffle | null | coords for shuffle animation, ex: { top:15, left: 200 } |
| animIn | null | properties that define how the slide animates in |
| animOut | null | properties that define how the slide animates out |
| cssBefore | null | properties that define the initial state of the slide before transitioning in |
| cssAfter | null | properties that defined the state of the slide after transitioning out |
| fxFn | null | function used to control the transition |
| height | ‘auto’ | container height |
| startingSlide | 0 | zero-based index of the first slide to be displayed |
| sync | 1 | true if in/out transitions should occur simultaneously |
| random | 0 | true for random, false for sequence (not applicable to shuffle fx) |
| fit | 0 | force slides to fit container |
| pause | 0 | true to enable “pause on hover” |
| autostop | 0 | true to end slideshow after X transitions (where X == slide count) |
| autostopCount | 0 | number of transitions (optionally used with autostop to define X) |
| delay | 0 | additional delay (in ms) for first transition (hint can be negative) |
| slideExpr | null | expression for selecting slides (if something other than all children is required) |
| cleartype | 0 | true if clearType corrections should be applied (for IE) |
| nowrap | 0 | true to prevent slideshow from wrapping |
Outros exemplos e uma documentação maior pode ser visto no site do plugin.
Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)
October 17th, 2008 at 5:08 am
oi..meu amigo…por favor me ajude..nao entendi nada desse post e o pior é que eu preciso muito..por favor me ajude ou explique passo a passo mais detalhadamente…sou noob nessa area..abraçao e belo site…
October 22nd, 2008 at 8:28 pm
Jquery é foda mesmo vei!!!
Esse slideshowl tá foda!!!
Valeu!!!
December 13th, 2008 at 6:56 pm
Parabéns muito legal este post, alias todo o site é show.
Abs,
December 27th, 2008 at 2:44 pm
Olá amigo.
Sou um tanto leigo no assuntoe não cheguei a entender o script acima.
Pergunto-lhe:
em que local da página HTML será colocado cada um desses tres scripts?
Agradeço sua informação.
February 24th, 2009 at 11:58 am
Parabéns amigo.
Gostei muito do artigo, fiquei satisfeito demais com os efeitos do jQuery, antigamente eu ficava pegando scripts aqui e ali, hj eu leio bastante sobre o assunto pra poder fazer eu mesmo meus scripts.
Continue assim, bastante esclarecedor seu artigo.
April 16th, 2009 at 11:42 am
é amigo…
já cozinhei uma feijoada, e até agora não funcionou.
uma dúvida: eu posso usar junto a um outro script, para gerar as imagens aleatóreamente?
June 1st, 2009 at 4:27 pm
A pessoal gostaria depedir uma dica de com inserir icones de navegação no slide show ..next e prev tipo o do lightbox
June 11th, 2009 at 11:14 am
Gostei do post, mas fiquei interressado mesmo em saber como foi que voce fez aquela nuvem de tags do seu site, será que não teria como voce fazer um tutorial.
July 17th, 2009 at 2:37 pm
OMG
era o eu tava precisando
muito bom, eu levei menos de 3 minutos xD
December 1st, 2009 at 4:47 pm
Tem como colocar link nas imagens?? eu pretendo usar como banner na home de um site que precisa ter link.
Grato.
December 3rd, 2009 at 3:00 pm
fiz mas deu um erro no $(’#galeria1′)
o objeto não dá suporte para a propriedade ou método
December 6th, 2009 at 6:03 pm
por favor publica como você fez essa LINDA nuvem de tags!!!
Não sou só eu q estou pedindo … me avisa quando publicar ok?
January 13th, 2010 at 7:42 pm
Ola gostaria de saber como eu faço em um slide show aquele efeito de paginaação ou seja conforme vai passando a foto passa também os números por exemplo 1 2 3 4 etc comforme psa a transição muda de cor os numeros
jafiz o slide show tudo certo com jquery só falta isso
January 22nd, 2010 at 5:56 pm
Olá, não consigo fazer esse códifo funcionar. Pode me ajudar. Preciso muito dele.
Além disso gostaria de saber como inserir ícones para as funções do slide.
Aguardo.