Novidades100 - Dicas de Internet e Computador

Criar Slides com o JQuery

Veja como Criar Slides Utilizando Jquery e o Plugin Jquery Cycle

Criar Slides com Jquery Criar Slides com Jquery Criar Slides com Jquery Criar Slides com Jquery Criar Slides com Jquery Criar Slides com Jquery

-

Aprenda a criar Slides utilizando o 'JQuery' e o 'Plugin JQuery Cycle' neste pequeno mas eficiente Tutorial.
Primeiramente você deve baixar a biblioteca do JQuery AQUI. Depois faça o download do plugin Cycle AQUI. Agora salve ambos em um diretório específico, exemplo js.
Agora tudo que você tem a fazer é digitar ou copiar o script abaixo (Coloquei uma página html completa), você pode recortar se necessário.

<html>
<head><title>Slides</title>
<style type="text/css">
*{width:100%;height:100%;margin:0px;padding:0px;text-align:center;}
#slides{width:250px;height:230px;background:#ff0;color:#fff;overflow:hidden;text-align:center;margin:0px auto;border:5px solid #2bf;}
a{color:#00f;font-size:130%;}
#slides img{width:250px;height:230px;}
#slides p{margin:0px;color:#ff0;}
</style>
<script type="text/javascript" src="http://www.novidades100.com.br/gadget/tools/slides/js/jquery.min.js">"></script>
<script type="text/javascript" src="http://www.novidades100.com.br/gadget/tools/slides/js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$("#slides p").cycle({
fx: 'zoom',
speed: 1000,
timeout: 2000,
prev : '#prev',
next : '#next'
})
})
</script>
</head>
<body>
<div id="slides">
<p>
<img src="http://www.novidades100.com.br/dicas/images/senhorita.jpg" alt="imagem 01" title="imagem 01">
<img src="http://www.novidades100.com.br/dicas/images/areia.jpg" alt="imagem 02" title="imagem 02">
<img src="http://www.novidades100.com.br/dicas/images/adversidades.jpg" alt="imagem 03" title="imagem 03">
</p>
</div>
<p>
<a href="#" id="prev">Anterior</a> -
<a href="#" id="next">Próxima</a>
</p>
</body>
</html>

Customizando seu Slide

Para adicionar outras configurações, tipo tempo que cada imagem fica disponível, velocidade da transição, altere os trechos speed e timeout. O tipo de transição também pode ser alterado. Este que está no código acima é zoom. Aqui estão outros que você pode adicionar na linha fx: 'zoom' - scrollDown, scrollUp, scrollRight, scrollLeft, fade, fadeZoom, shuffle, turnDown, curtainX, etc.
Vejas Outras Opções Aqui
Obs: Você pode testar seu slide offline, bastando apenas salvar como slide.html e abrir com o seu navegador preferido. É necessário que os arquivos jquery estejam na pasta indicada no script e o arquivo de teste (slide.html) esteja junto ao diretório js.
Gerar Slides com Imagens da Internet
Gerador de Slides

| | HomePage | Relatar Problema |