-
7/27/2019 Como Criar Um Slideshow Usando Jquery e o Plugin Cycle Em 3 Minutos
1/6
Como criar um slideshow usando Jquery e o Plugin Cycle em 3 minutos
Com o plugin cycle do jQuery possvel criar diversos tipos de slideshows,sem saber javascript, em 3 apenas minutos. Sem exagero algum, se dvidadisso, leia o post todo, depois deixe um miojo na gua fervendo enquanto fazo slideshow e se queimar pode me mandar um email me xingando.
O plugin bem leve ( 10kb ) epode ser baixado no aquiou nosite doplugin(l pode ter verses mais novas).
E vamos aos cdigos.
Invoque os scripts dentro da tag head da sua pgina:
1
2
Voc pode baixar o cycleaquie o jqueryaqui.
Para as imagens no serem mostradas antes do load total da pgina, coloque aseguinte linha de cdigo no seu css:
1
2
3
4
5
6
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:
1
23
4
5
6
7
E depois s brincar com as opes do cycle :Primeiro exemplo:
1
23
$(document).ready(function() {$('#galeria1').cycle({
http://www.tidbits.com.br/como-criar-um-slideshow-usando-jquery-e-o-plugin-cycle-em-3-minutoshttp://www.tidbits.com.br/como-criar-um-slideshow-usando-jquery-e-o-plugin-cycle-em-3-minutoshttp://www.tidbits.com.br/download/cycle.jshttp://www.tidbits.com.br/download/cycle.jshttp://www.tidbits.com.br/download/cycle.jshttp://malsup.com/jquery/cycle/begin.htmlhttp://malsup.com/jquery/cycle/begin.htmlhttp://malsup.com/jquery/cycle/begin.htmlhttp://malsup.com/jquery/cycle/begin.htmlhttp://www.tidbits.com.br/download/_scripts/cycle.jshttp://www.tidbits.com.br/download/_scripts/cycle.jshttp://www.tidbits.com.br/download/_scripts/cycle.jshttp://www.tidbits.com.br/download/_scripts/jquery.jshttp://www.tidbits.com.br/download/_scripts/jquery.jshttp://www.tidbits.com.br/download/_scripts/jquery.jshttp://www.tidbits.com.br/download/_scripts/jquery.jshttp://www.tidbits.com.br/download/_scripts/cycle.jshttp://malsup.com/jquery/cycle/begin.htmlhttp://malsup.com/jquery/cycle/begin.htmlhttp://www.tidbits.com.br/download/cycle.jshttp://www.tidbits.com.br/como-criar-um-slideshow-usando-jquery-e-o-plugin-cycle-em-3-minutos -
7/27/2019 Como Criar Um Slideshow Usando Jquery e o Plugin Cycle Em 3 Minutos
2/6
4
5
6
7
8
fx:'scrollLeft',
speed: 3000});
});
-
7/27/2019 Como Criar Um Slideshow Usando Jquery e o Plugin Cycle Em 3 Minutos
3/6
O Speed a velocidade de transio, fx o efeito.
Alm 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
$('#galeria2').cycle({
fx: 'growX',speed: 3000
});
$('#pauseButton').click(function() {$('#galeria2').cycle('pause');
});
$('#resumeButton').click(function() {
$('#galeria2').cycle('resume');});
});
-
7/27/2019 Como Criar Um Slideshow Usando Jquery e o Plugin Cycle Em 3 Minutos
4/6
-
7/27/2019 Como Criar Um Slideshow Usando Jquery e o Plugin Cycle Em 3 Minutos
5/6
Pausar Continuar
Existem diversas outras opes como boto anterior e prximo, paginao,etc.
Segue abaixo a lista de opes (em ingls).
Opo Valor O que faz?
fx fade one of: fade, shuffle, zoom, scrollLeft, etc
timeout 4000milliseconds between slide transitions (0 to disable auto
advance)
continuous 0true 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 nullcallback fn for prev/next clicks : function(isNext,
zeroBasedSlideIndex, slideElement)
pager null id of element to use as pager container
pagerClick nullcallback fn for pager clicks: function(zeroBasedSlideIndex,
slideElement)
-
7/27/2019 Como Criar Um Slideshow Usando Jquery e o Plugin Cycle Em 3 Minutos
6/6
Opo Valor O que faz?
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 nullcallback 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 nullproperties that define the initial state of the slide before
transitioning in
cssAfter nullproperties 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 0true 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 0true to end slideshow after X transitions (where X == slide
count)
autostopCount 0number of transitions (optionally used with autostop to
define X)
delay 0
additional delay (in ms) for first transition (hint can be
negative)
slideExpr nullexpression 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 documentao maior pode ser visto nosite do plugin.
http://malsup.com/jquery/cycle/http://malsup.com/jquery/cycle/http://malsup.com/jquery/cycle/http://malsup.com/jquery/cycle/