Como criar um slideshow usando Jquery e o Plugin Cycle em 3 minutos

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:

<script type="text/javascript" src="cycle.js" ></script>
<script type="text/javascript" src="jquery.js" ></script>

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:

dv.pics { display: none; }
div.pics img { 
    height: 200px; // altura das imagens
    width: 300px; // largura das imagens
    overflow:hidden; // limitando a div
} 

Escreva o html:

<div class="pics" id="galeria1"> 
	<img src="01.jpg" alt="Teste de JQuery" /> 
	<img src="02.jpg" alt="Teste de JQuery" /> 
	<img src="03.jpg" alt="Teste de JQuery" /> 
	<img src="04.jpg" alt="Teste de JQuery" /> 
	<img src="05.jpg" alt="Teste de JQuery" /> 
</div> 

E depois é só brincar com as opções do cycle :
Primeiro exemplo:

<script type="text/javascript">
	$(document).ready(function() {
		$('#galeria1').cycle({ 
			fx:'scrollLeft',
			speed:    3000
		});
	});
</script>
Teste de JQueryTeste de JQueryTeste de JQueryTeste de JQueryTeste de JQuery

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:

<script type="text/javascript">
	$(document).ready(function() {
		$('#galeria2').cycle({ 
			fx:        'growX',
			speed:    3000
		});				
		$('#pauseButton').click(function() { 
			$('#galeria2').cycle('pause'); 
		});		
		$('#resumeButton').click(function() { 
			$('#galeria2').cycle('resume'); 
		});	
	});
</script>
Teste de JQueryTeste de JQueryTeste de JQueryTeste de JQueryTeste de JQuery

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.