SlideShow Simples com Jquery e Cycle

Neste tutorial vou mostrar como criar um slideshow simples utilizando Jquery juntamente com o plugin cycle para criarmos um slideshow simples, porém bem legal de aplicar em seus trabalhos.

Por | @marcianodias Programação
<p>Neste tutorial vou mostrar como criar um slideshow simples utilizando Jquery juntamente com o plugin cycle para criarmos um slideshow simples, por&eacute;m bem legal de aplicar em seus trabalhos.<br /> <br /> Se quiseres, podes baixar a o slideshow que criei e utilizar os arquivos para seguir o tutorial. <a href="http://www.4shared.com/file/9ijFQTIt/tutorial_jquery_jcycle.html" target="_blank">Clique aqui</a>.<br /> <br /> <strong>Vamos ao tutorial!</strong><br /> <br /> Primeiro voc&ecirc; deve ter o jquery na pasta onde voc&ecirc; esta desenvolvendo o seu trabalho (ou ent&atilde;o dentro de uma subpasta ou dentro de arquivo qualquer chamado por include). Para baixar o jquery acesse o site: <a href="http://jquery.com/" target="_blank">jquery.com</a>.<br /> <br /> Segundo passo &eacute; baixar o plugin Cycle. Para isso acesse o site <a href="http://jquery.malsup.com/" target="_blank">jquery.malsup.com</a>, fa&ccedil;a o download do plugin e coloque-o na pasta onde voc&ecirc; est&aacute; desenvolvendo seu trabalho.<br /> <br /> Tamb&eacute;m baixei 5 imagens que irei utilizar no tutorial. Agora crie um documento html, salve-o e d&ecirc; um nome a ele. Abaixo da tag title adicione a tag que chamar&aacute; o <strong>jquery.js.</strong> veja:</p> <pre><code><script src="jquery.js" type="text/javascript"><!--mce:0--></script></code></pre> <p><br /> <br /> Em seguida, abaixo da tag que chama o <strong>jquery.js</strong>, vamos adicionar a tag que chama o <strong>cycle.js</strong>.</p> <pre><code><script src="cycle.js" type="text/javascript"><!--mce:1--></script></code></pre> <p><br /> <br /> Agora, abaixo das tags que chamam o <strong>jquery.js</strong> e <strong>cycle.js</strong> vamos adicionar a fun&ccedil;&atilde;o que faz o cycle funcionar. Veja:</p> <pre><code><script type="text/javascript"><!--mce:2--></script></code></pre> <p><br /> <br /> O ID #slideshow fica o bloco onde conter&aacute; as imagens que ir&atilde;o compor o nosso slideshow. Nesse casso, podemos adicionar o id #slideshow em uma DIV. &Eacute; exatamente isso que iremos fazer. Veja:</p> <pre><code><div id="slideshow"> </div></code></pre> <p><br /> <br /> Como voc&ecirc; pode imaginar, essa ID pode ser formatada em CSS. Essa parte &eacute; com voc&ecirc;. Ent&atilde;o, vamos adicionar as imagens dentro da div que criamos. Veja:</p> <pre><code><div id="slideshow"> <img src="imagens/01.jpg" alt="" /> <img src="imagens/02.jpg" alt="" /> <img src="imagens/03.jpg" alt="" /> <img src="imagens/04.jpg" alt="" /> <img src="imagens/05.jpg" alt="" /> </div></code></pre> <p><br /> <br /> S&oacute; isso. Simples, n&atilde;o &eacute; mesmo? Agora &eacute; so estilizar seu slideshow com css. O uso basicamente do Cycle &eacute; assim, se voc&ecirc; quiser voc&ecirc; pode procurar aprender mais sobre este plugin, pois tem v&aacute;rias outras formas de personalizar o seu slideshow.</p>

Mais sobre: cycle jquery javascript
Share Tweet
Comentários
Carregar comentários
Destaquesver tudo