| Culinária | Detonados | Internet | Poesias | Wallpapers | Web Tools |
Aprenda a criar Slides utilizando o 'JQuery' e o 'Plugin JQuery Cycle' neste pequeno mas eficaz 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 código abaixo em um editor de texto, depois salve-o como 'slide.html', então execute este arquivo com o seu navegador preferido (ele irá funcionar mesmo Off Line).
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
<script>
$(function() {
$("#slides p").cycle({
fx: 'zoom',
speed: 1000,
timeout: 2000,
prev : '#prev',
next : '#next'
})
})
</script>
</head>
<body>
<div id="slides">
<p>
<img src="https://novidades100.com.br/gadget/web/images/001.webp" title="imagem 01">
<img src="https://novidades100.com.br/gadget/web/images/002.webp" title="imagem 02">
<img src="https://novidades100.com.br/gadget/web/images/003.webp" title="imagem 03">
<img src="https://novidades100.com.br/gadget/web/images/004.webp" title="imagem 04">
</p>
</div>
<p>
<a href="#" id="prev">Anterior</a> -
<a href="#" id="next">Próxima</a>
</p>
</body>
</html>
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
Slides, JQuery, Slide, Plugin, Cycle
Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos
Nosso site utiliza cookies para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades de acordo com seus interesses.
Política de Privacidade
