Nesse tutorial trabalharemos passo-a-passo na criação de um slideshow do tipo Carrossel, utilizando jQuery.
O primeiro passo é criar a marcação HTML. Não é necessário, mas pode ser interessante trabalhar para que as imagens sejam links – para outras páginas ou para si próprias, em tamanho original. Por isso será criada uma lista, em que cada item receberá uma imagem e essa imagem será um link, como no código abaixo:
<div id="carrossel"> <div id="slides"> <ul> <li><a href="#"><img alt="Img 1" src="images/im_01.jpg" /></a></li> <li><a href="#"><img alt="Img 2" src="images/im_02.jpg" /></a></li> <li><a href="#"><img alt="Img 3" src="images/im_03.jpg" /></a></li> </ul> </div> <div id="buttons"><a id="prev" href="#">prev</a> <a id="next" href="#">next</a></div> </div>
O próximo será trabalhar o CSS. Note que não há nada de “especial”. Estou trabalhando o id dos elementos, estilizando o tamanho das imagens e posições, e alterando o estilo da lista, removendo os marcadores que são padrão para esse tipo de elemento e determinando uma largura (que deve ser igual ao tamanho de uma imagem multiplicado pela quantidade de imagens). A posição setada com left:0 e top:0 fará com que as imagens de posicionem umas acima das outras.
#carousel {
width:255px;
height:290px;
margin:0 auto;
}
#slides {
overflow:hidden;
position:relative;
width:250px;
height:250px;
border:1px solid #ccc;
}
#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;
width:750px;
}
#slides li {
width:250px;
height:250px;
float:left;
}
#slides li img {
padding:5px;
width: 240px;
height: 240px;
opacity: 0.8;
}
#slides li img:hover {
padding:5px;
width: 240px;
height: 240px;
opacity: 1;
}
Agora trabalharemos o Jquery. Certifique-se que você tenha inserido o link para a biblioteca iQuery previamente em sua página (se não sabe como faze-lo, dê uma olhada na série Introdução a jQuery).
$(document).ready(function() {
//Velocidade da rotação e contador
var speed = 5000;
var run = setInterval('rotate()', speed);
//Pega o valor da largura e calcular o valor da posição da esquerda
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);
//Coloca o último item antes do primeiro item, caso o usuário clique no botão de ANTERIOR
$('#slides li:first').before($('#slides li:last'));
//Coloca o item atual na posição correta
$('#slides ul').css({'left' : left_value});
//Se o usuário clica no botão ANTERIOR
$('#prev').click(function() {
//Pega a posição da direita
var left_indent = parseInt($('#slides ul').css('left')) + item_width;
//Move o item
$('#slides ul').animate({'left' : left_indent}, 200,function(){
//Move o último item e o coloca como o primeiro
$('#slides li:first').before($('#slides li:last'));
//Coloca o item atual na posição correta
$('#slides ul').css({'left' : left_value});
});
//Cancela o comportamento do click
return false;
});
//Se o usuário clica no botão PROXIMO
$('#next').click(function() {
//Pega a posição da direita
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
//Move o item
$('#slides ul').animate({'left' : left_indent}, 200, function () {
//Move o último item e o coloca como o primeiro
$('#slides li:last').after($('#slides li:first'));
//Coloca o item atual na posição correta
$('#slides ul').css({'left' : left_value});
});
//Cancela o comportamento do click
return false;
});
//Se o usuário está com o mouse sob a imagem, para a rotacao, caso contrário, continua
$('#slides').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});
//O temporatizador chamará essa função e a rotação será feita
function rotate() {
$('#next').click();
}
Agora é só salvar e rodar a página no seu navegador. O resultado é algo como a imagem abaixo:
Para baixar os arquivos desse tutorial, clique aqui.
