pagina web

jQuery Cycle Plugin
O Cycle é um plugin do jQuery que permite o desenvolvimento de slideshow de forma simples e com diversos efeitos de animação na transição de slides. O plug-in fornece um método chamado “cycle” que é chamado em um elemento container
(uma div por exemplo), sendo que cada elemento filho do recipiente torna-se uma imagem de slide, este plugin permite definir a forma e o tempo de cada slide e suas transições. Exemplo:
1° Passo: Criar uma página html simples com uma “div” para servir de container para as imagens, dentro desta divisão incluia as imagens e defina comprimento(width) e altura(height).

JQuery Cycle Plugin - Basic Demo

2° Passo: Realize a importação dos arquivos do pluin e do Jquery, incluindo as linhas abaixo no cabeçalho da página web.

3° Passo: Crie o script que controlará a apresentação de slides dentro do cabeçalho.

$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});

4° Passo: Primeira fase de testes, para realizar isto salve a página e abra em vários navegadores para garantir que tudo esta funcionando e correndo bem até o momento e para podermos continuar com as personalizações.
5° Passo: Escolha a melhor opções de transição de slides para sua necessidade, altere o valor da propriedade fx de ‘fade’ pora qualquer um dos efeitos a seguir:




























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 zoom

6° Passo: Velocidade da transição de slides, comando speed deve ser adicionado logo abaixo do comando fx, sendo seu valor o tempo em milisegundos da transição de um slide a outro. Observação: 1000 milisegundos é igual a 1 segundo.

7° Passo: Tempo de exibição de cada slide timeout, é a