Transcript
  • 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/

Top Related