& lsaquo; & lsaquo; Ciclo homejQuery Cycle Plugin - Principiante Demos.
Faça o download do complemento Cycle.
1 - Defina seu marcação e estilos.
Todos os exemplos desta página usam a seguinte marcação e CSS:
2 - Escolha um efeito.
Você pode escolher entre qualquer um dos seguintes efeitos nomeados: blindX blindY blindZ cover curtainX curtainY fade fadeZoom growX growY scrollUp scrollDown scrollLeft scrollRight scrollHorz scrollVert shuffle slideX slideY toss turnUp turnDown turnLeft turnRight revelar wipe zoom Você especifica o nome do efeito, passando uma string para o método de ciclo ou usando um objeto de opções e configurando a propriedade fx para o nome do efeito desejado.
3 - Escolha valores de velocidade e tempo limite.
Em seguida, você pode querer escolher valores de velocidade e tempo limite para controlar quão rápido e com que frequência as transições de slide ocorrem. A opção de velocidade define o número de milissegundos que levará para a transição de um slide para o próximo. A opção de tempo limite especifica quantos milissegundos decorrerão entre o início de cada transição.
4 - Escolha outras opções.
Há muitas outras opções para escolher. Dois que você pode achar útil são a pausa e o aleatório. A opção de pausa faz com que a apresentação de slides seja pausada quando o mouse aparece sobre o slide. A opção aleatória faz com que os slides sejam mostrados em ordem aleatória, em vez de seqüenciais.
Coisas a ter em mente.
- Regras CSS! Ao criar suas apresentações de slides, lembre-se de que os efeitos de animação funcionam melhor quando o contêiner e o slide possuem uma caixa fixa.
- Lembre-se de que todo elemento filho do recipiente se torna um slide!
& lsaquo; & lsaquo; ciclo homejQuery Cycle Plugin - Demonstrações avançadas.
Faça o download do complemento Cycle.
Ins e Outs.
Você pode obter um controle mais fino sobre velocidade e flexibilidade, usando as versões de entrada / saída dessas propriedades. Da fonte do plugin:
As propriedades speedIn e easeIn são aplicadas quando um slide é transferido. Se não estiver definido, esses valores são definidos para os valores da velocidade e das opções de flexibilização, respectivamente.
As propriedades speedOut e easeOut são aplicadas quando um slide é transferido para fora. Se não estiver definido, esses valores são definidos para os valores da velocidade e das opções de flexibilização, respectivamente.
Agora você pode colocar um novo toque em suas transições aproveitando essas opções de entrada / saída.
Transições personalizadas.
É aí que as coisas começam a se divertir. As transições personalizadas permitem desbloquear o poder total do Plug-in do ciclo. Tudo o que você aprendeu até agora foi construído em transições personalizadas sob o capô. Para entender como as transições realmente funcionam e como você pode personalizá-las, você precisa entender mais cinco propriedades de opções: cssAntes Os estilos que são aplicados a um slide imediatamente antes de serem transferidos. AnimIn Os estilos que são animados como um slide são transitados in. animOut Os estilos que são animados como um slide que transitou para fora. cssAfter Os estilos que são aplicados a um slide imediatamente depois que ele é transferido para fora. cssFirst Os estilos que são aplicados uma vez no primeiro slide - o que está mostrando inicialmente. Esta propriedade é uma propriedade be-kind-to-IE. É necessário manter o IE feliz ao animar o primeiro slide. Todas as propriedades que são animadas devem ter valores iniciais, caso contrário o IE será bork. Esses valores podem ser definidos em CSS, mas essa propriedade remove a dependência da definição de CSS externa.
Você pode ter percebido que isso lhe dá controle total sobre o slide de entrada e o slide de saída. Você pode escolher quais propriedades para animar, onde o slide deve começar, etc. Legal!
Use essas opções, juntamente com a opção fx personalizada, para criar transição que use diferentes efeitos para os slides de entrada e saída.
Coisas a ter em mente.
- Nem todas as propriedades CSS podem ser animadas! O Internet Explorer fará você pagar se você definir propriedades nas opções animIn ou animOut que não são animáveis. Por exemplo, não tente animar a propriedade do z-index!
Opções JQQ de ciclo fx
Obter através da App Store Leia esta publicação em nosso aplicativo!
Cycle jQuery: como alterar o efeito de transição em uma apresentação de slides em execução.
Estou usando a opção antes do: jQuery Cycle plugin para determinar se o usuário está se movendo para a esquerda ou para a direita através da apresentação de slides, e eu gostaria de animar de acordo (scrollLeft, scrollRight).
Infelizmente, não consigo encontrar como alterar as opções do plugin (o efeito de transição) enquanto ele está sendo executado.
Parece que este é o efeito que você deseja: jsfiddle / zvVcD /
Se for esse o caso, você precisará usar o efeito "scrollHorz" e, em seguida, definir gatilhos anteriores e próximos, assim:
Aqui está a abordagem mais geral:
Você pode mudar scrollLeft e scrollRight para o que quiser. Tenho em atenção que estou usando as classes. prev,.next e. cycler para o meu botão anterior, o próximo botão e o container do ciclador, respectivamente.
Opções JQQ de ciclo fx
Os slideshows do Cycle2 podem ser inicializados automaticamente, simplesmente adicionando a classe de ciclo do classname ao seu elemento do contêiner de slides.
O Cycle2 irá encontrar e inicializar automaticamente uma apresentação de slides para qualquer elemento que contenha este nome de classe. Se você não deseja esse comportamento, não adicione a classe de slides de ciclo à sua apresentação de slides e, em vez disso, initalize a apresentação de slides de forma programática invocando o método do ciclo no elemento do contêiner de apresentação de slides:
A inicialização automática não é suportada para apresentações de slides que são adicionadas ao DOM após o evento pronto do jQuery ter disparado. Neste caso, você precisará inicializar programaticamente sua apresentação de slides invocando o método do ciclo como mostrado acima. Você não precisa qualificar seu seletor para a parte do DOM que foi atualizada porque o Ciclo2 não reinicializará uma apresentação de slides em execução se você invocar o ciclo mais de uma vez. Portanto, é perfeitamente seguro executar o código acima várias vezes sem ter que se preocupar com slideshows que já estão sendo executados.
As opções são definidas no elemento de apresentação de slides usando atributos de nome de opção de ciclo de dados. O nome da opção é sempre minúsculo e prefixado com o ciclo de dados. Por exemplo, para definir as opções de velocidade e velocidade manual, você faria isso:
Este é o método preferido para configurar as opções de apresentação de slides, uma vez que reduz (ou elimina) a necessidade de script de inicialização personalizado.
As opções também podem ser definidas programativamente se você preferir, passando um hash de opções para o método do ciclo. Quando as opções de configuração são programadas, o nome da opção não contém o prefixo de ciclo de dados e a seqüência de caracteres é camelCased em hifens:
Todas as opções podem ser declaradas com atributos de ciclo de dados no elemento do contêiner e serão herdadas por todos os slides.
Opções na tabela abaixo que têm um & bull; O símbolo pode ser substituído em elementos de deslizamento individuais para ter propriedades específicas para slides específicos.
Por padrão, uma apresentação de slides avançará perfeitamente do último slide para o primeiro.
Para forçar o contentor de apresentação de slides para uma relação de aspecto específica, por exemplo, para manter um conjunto de imagens que são 600x400, use uma linha de proporção como esta:
Para desativar o gerenciamento de altura, defina o valor desta opção como -1 ou falso.
(uso programático somente)
O Cycle2 usa modelos simples de estilo bigode por padrão.
(uso programático somente)
O Cycle2 usa modelos simples de estilo bigode por padrão.
O link do pager padrão é simplesmente uma bala.
O Cycle2 usa modelos simples de estilo bigode por padrão.
Por padrão, Cycle2 encontra todos os elementos de imagem que são filhos imediatos do container de slides.
Se o valor for -1, o updateView é invocado imediatamente após a transição do slide.
Se o valor for 0, o updateView é invocado durante a transição do slide.
Se o valor for 1, o updateView é invocado imediatamente após o início de uma transição de slide e novamente imediatamente após a transição.
Os comandos são emitidos para apresentações de slides invocando o ciclo no elemento do contêiner e passando-o um argumento de string, que é o nome do comando.
Comandos Declarativos.
É possível emitir comandos declarativamente usando o atributo cycle de dados-cmd. Você pode usar esse atributo em qualquer elemento e o Ciclo2 usará a delegação de eventos para emitir um comando de ciclo quando o elemento for clicado. Por exemplo, para que um elemento de botão aleatório pause sua apresentação de slides, você pode fazer isso:
Quando o botão acima é clicado, Cycle2 gerará automaticamente e executará este código para você:
Para especificar uma apresentação de slides específica como o alvo do comando, use o atributo de contexto do ciclo de dados e defina seu valor para uma seqüência de seleção que identifique a apresentação de slides desejada:
Quando o botão acima é clicado, Cycle2 gerará automaticamente e executará este código para você:
E, finalmente, você pode passar um argumento para o comando do ciclo usando o atributo data-cycle-arg. Por exemplo, para remover o primeiro slide em uma apresentação de slides:
O Cycle2 emite vários eventos à medida que uma apresentação de slides é executada e você pode se ligar a esses eventos para personalizar ou aumentar o comportamento da apresentação de slides.
Todos os eventos de ciclo são acionados no elemento da apresentação de slides e, portanto, podem ser vinculados usando o código como:
Bits Diversos.
O hash das opções Cycle2 contém todas as opções de apresentação de slides detalhadas acima, juntamente com as seguintes partes adicionais de estado de tempo de execução.
Os dados de estado são somente leitura.
Testando o Estado pausado.
Ciclo2 atribui o ciclo de classe - pausado para o contentor de apresentação de slides quando a apresentação de slides está em pausa. Os scripts podem determinar se a apresentação de slides está pausada atualmente usando um código como este:
Cada slide em sua apresentação de slides pode ter um atributo chamado data-cycle-hash. Se você atribuir um valor a esse atributo, o hash de localização da página atual será atualizado para refletir esse valor quando o slide estiver ativo. Da mesma forma, quando a página é carregada se o hash de localização for igual ao hash do ciclo de dados de um dos slides, esse slide será ativado. Veja o demo de Bookmarkable para obter mais informações.
Os slideshows do Cycle2 podem ser inicializados automaticamente, simplesmente adicionando a classe de ciclo do classname ao seu elemento do contêiner de slides.
O Cycle2 irá encontrar e inicializar automaticamente uma apresentação de slides para qualquer elemento que contenha este nome de classe. Se você não deseja esse comportamento, não adicione a classe de slides de ciclo à sua apresentação de slides e, em vez disso, initalize a apresentação de slides de forma programática invocando o método do ciclo no elemento do contêiner de apresentação de slides:
A inicialização automática não é suportada para apresentações de slides que são adicionadas ao DOM após o evento pronto do jQuery ter disparado. Neste caso, você precisará inicializar programaticamente sua apresentação de slides invocando o método do ciclo como mostrado acima. Você não precisa qualificar seu seletor para a parte do DOM que foi atualizada porque o Ciclo2 não reinicializará uma apresentação de slides em execução se você invocar o ciclo mais de uma vez. Portanto, é perfeitamente seguro executar o código acima várias vezes sem ter que se preocupar com slideshows que já estão sendo executados.
As opções são definidas no elemento de apresentação de slides usando atributos de nome de opção de ciclo de dados. O nome da opção é sempre minúsculo e prefixado com o ciclo de dados. Por exemplo, para definir as opções de velocidade e velocidade manual, você faria isso:
Este é o método preferido para configurar as opções de apresentação de slides, uma vez que reduz (ou elimina) a necessidade de script de inicialização personalizado.
As opções também podem ser definidas programativamente se você preferir, passando um hash de opções para o método do ciclo. Quando as opções de configuração são programadas, o nome da opção não contém o prefixo de ciclo de dados e a seqüência de caracteres é camelCased em hifens:
Todas as opções podem ser declaradas com atributos de ciclo de dados no elemento do contêiner e serão herdadas por todos os slides.
Opções na tabela abaixo que têm um & bull; O símbolo pode ser substituído em elementos de deslizamento individuais para ter propriedades específicas para slides específicos.
Por padrão, uma apresentação de slides avançará perfeitamente do último slide para o primeiro.
Para forçar o contentor de apresentação de slides para uma relação de aspecto específica, por exemplo, para manter um conjunto de imagens que são 600x400, use uma linha de proporção como esta:
Para desativar o gerenciamento de altura, defina o valor desta opção como -1 ou falso.
(uso programático somente)
O Cycle2 usa modelos simples de estilo bigode por padrão.
(uso programático somente)
O Cycle2 usa modelos simples de estilo bigode por padrão.
O link do pager padrão é simplesmente uma bala.
O Cycle2 usa modelos simples de estilo bigode por padrão.
Por padrão, Cycle2 encontra todos os elementos de imagem que são filhos imediatos do container de slides.
Se o valor for -1, o updateView é invocado imediatamente após a transição do slide.
Se o valor for 0, o updateView é invocado durante a transição do slide.
Se o valor for 1, o updateView é invocado imediatamente após o início de uma transição de slide e novamente imediatamente após a transição.
Os comandos são emitidos para apresentações de slides invocando o ciclo no elemento do contêiner e passando-o um argumento de string, que é o nome do comando.
Comandos Declarativos.
É possível emitir comandos declarativamente usando o atributo cycle de dados-cmd. Você pode usar esse atributo em qualquer elemento e o Ciclo2 usará a delegação de eventos para emitir um comando de ciclo quando o elemento for clicado. Por exemplo, para que um elemento de botão aleatório pause sua apresentação de slides, você pode fazer isso:
Quando o botão acima é clicado, Cycle2 gerará automaticamente e executará este código para você:
Para especificar uma apresentação de slides específica como o alvo do comando, use o atributo de contexto do ciclo de dados e defina seu valor para uma seqüência de seleção que identifique a apresentação de slides desejada:
Quando o botão acima é clicado, Cycle2 gerará automaticamente e executará este código para você:
E, finalmente, você pode passar um argumento para o comando do ciclo usando o atributo data-cycle-arg. Por exemplo, para remover o primeiro slide em uma apresentação de slides:
O Cycle2 emite vários eventos à medida que uma apresentação de slides é executada e você pode se ligar a esses eventos para personalizar ou aumentar o comportamento da apresentação de slides.
Todos os eventos de ciclo são acionados no elemento da apresentação de slides e, portanto, podem ser vinculados usando o código como:
Bits Diversos.
O hash das opções Cycle2 contém todas as opções de apresentação de slides detalhadas acima, juntamente com as seguintes partes adicionais de estado de tempo de execução.
Os dados de estado são somente leitura.
Testando o Estado pausado.
Ciclo2 atribui o ciclo de classe - pausado para o contentor de apresentação de slides quando a apresentação de slides está em pausa. Os scripts podem determinar se a apresentação de slides está pausada atualmente usando um código como este:
Cada slide em sua apresentação de slides pode ter um atributo chamado data-cycle-hash. Se você atribuir um valor a esse atributo, o hash de localização da página atual será atualizado para refletir esse valor quando o slide estiver ativo. Da mesma forma, quando a página é carregada se o hash de localização for igual ao hash do ciclo de dados de um dos slides, esse slide será ativado. Veja o demo de Bookmarkable para obter mais informações.
No comments:
Post a Comment