Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal
Esse Post mostrarei como desenvolver uma aplicação de Slide, como pode ser visualizado na imagem abaixo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img85.imageshack.us/img85/6769/58233216.jpg&key=6cca80878bfa4d628ed52f94349d760eff9e4ee07548d50bba3665ba33202a7a" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img13.imageshack.us/img13/3408/99536183.jpg&key=4ef861924784c51a43aad39ae86cd45f957f77bc98c8454430716fce93bc312c" alt="Imagem Postada" />
Para o desenvolvimento vamos precisar dos seguintes arquivos:
Framework Jquery 1.3.2
Plugin cycle
Para ser um exemplo didatico vamos criar uma pasta chamada slides. Dentro dela vamos colocar o jquery-1.3.2.js, jcycle.js e vamos criar os arquivos slide.html (página de apresentação dos slides), slide.css (página de estilo) e outra página com o nome de imagens onde contem as imagens do exemplo, como pode ser vista na imagem abaixo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img641.imageshack.us/img641/7973/estruturaslides.jpg&key=5798b9e9fcc3d4dfcc30379f462e6d324660221bd70a09888ef8450c97ebb055" alt="Imagem Postada" />
Iniciaremos o desenvolvimento pela página slide.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Slides</title>
<script src="jquery-1.3.2.js" language="javascript"></script>
<script src="jquery.cycle.js" language="javascript"></script>
<link href="estilo.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
$('#conteudo').cycle({
timeout: 8000, //Tempo da transição
speed: 400, //Velocidade da transição
fx: 'fade', //Tipo
pager: '#nav', //A div que vai aprensetar os números do slides
prev: '#anterior', //Link para voltar ao slide anterior
next: '#proxima' //Link para próximo slide
});
});
</script>
</head>
<body>
<div class="slide">
<div class="bloco_navegacao">
<div id="anterior" class="navegacao">
<a href="javascript:void(0)"><strong><</strong> Anterior</a>
</div>
<div id="nav" class="nav">
</div>
<div id="proxima" class="navegacao">
<a href="javascript:void(0)">Próxima <strong>></strong></a>
</div>
</div>
<div id="conteudo">
<div>
<div class="conteudo_img">
<img src="imagens/img1.jpg" width="258" height="193"/>
</div>
<h1>Title 1</h1>
<div class="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
</div>
<div>
<div class="conteudo_img">
<img src="imagens/img2.jpg" width="258" height="193"/>
</div>
<h1>Title 2</h1>
<div class="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
</div>
<div>
<div class="conteudo_img">
<img src="imagens/img3.jpg" width="258" height="193">
</div>
<h1>Title 3</h1>
<div class="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
</div>
</div>
</div>
</body>
</html>slide.css
body {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.slide {
width: 500px;
border: 1px solid #36F;
display: block;
padding:5px
}.slide .navegacao {
border: 1px solid #000;
padding: 3px;
background-color:#BDD2FF;
width:80px;
font-weight:bold;
text-align:center;
float:left
}.slide #anterior {
margin-right:5px;
}.slide .bloco_navegacao {
width:100%;
display:block;
height:27px;
}.slide .navegacao:hover {
background-color:#ECF1FF;
}.slide .navegacao a:link {
text-decoration:none;
color:#333;
}.slide .nav,.slide #nav {
display:block;
float:none;
padding: 3px;
margin-top:1px;
float:left;
}.slide .nav a {
border: 1px solid #000;
padding-top: 3px;
padding-bottom: 3px;
padding-left:5px;
padding-right: 5px;
background-color:#BDD2FF;
margin-right:5px;
text-decoration:none;
color:#000;
}.slide #nav a.activeSlide {
background: #ECF1FF;
}.slide #conteudo {
display:block;
}.slide h1 {
margin:0;
font-family:Tahoma, Geneva, sans-serif;
}.slide #conteudo .conteudo_img {
float:left;
margin-right:10px;
border:1px solid #000;
}.slide #conteudo .texto{
padding:10px;
}Prontinho, agora já está funcionando
Para mais informações sobre esse plugin o endereço é <a href="http://jquery.malsup.com/cycle/">http://jquery.malsup.com/cycle/
Para download clique aqui
Para mais conteudo, acesse meu blog http://mateusgamba.wordpress.com
Carregando comentários...