NOVIDADES100 Tem de Tudo
Criar Slides com Jquery
Veja como Criar Slides Utilizando Jquery e o Plugin Jquery Cycle
Vou passar para vocês, de forma muito prática como editar slides. Podem ser usadas imagens da web ou suas próprias imagens.
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%;}
img{width:250px;height:230px;}
#slides ul{margin:0px;color:#ff0;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slides ul").cycle({
fx: 'zoom',
speed: 1000,
timeout: 5000,
prev : '#prev',
next : '#next'
})
})
</script>
</head>
<body>
<div id="slides">
<ul>
<li><img src="http://www.novidades100.com.br/images/carnaval/2.jpg" alt="imagem 01" title="imagem 01"></li>
<li><img src="http://www.novidades100.com.br/images/carnaval/11.jpg" alt="imagem 02" title="imagem 02"></li>
<li><img src="http://www.novidades100.com.br/images/carnaval/77.jpg" alt="imagem 03" title="imagem 03"></li>
</ul>
</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.
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.
Veja Também…
Veja como Construir Gadgets
Editar Popup's
Criar Slides com JQuery
Redirecionar Url's em Php, JavaScript e Html
Algumas Funções do Formidável JQuery
Criar Banners para Sites e Blogs
Editar Legendas Ocultas em Videos do You Tube
Atributos e Propriedades de Marquee
Criando Páginas Html
Editar e Enviar Sitemaps para Sites e Blog do Blogspot