Salve, salve galera!
Estava procurando algum slide show em
jQuery bem SIMPLES que tivesse apenas as seguintes funções:
- alternar entre as imagens com o efeito fade in;
- interromper o slide show on mouse over;
- seguir o slide show on mouse out;
- possibilidade de inserir os botões prev e next para navegação nos slides;
Busquei na internet e apareceram centenas exemplos e plugins! Acontece que achei todos um pouco complicado de mais pro meu gosto. Eu queria algo bem simples mesmo!
Então resolvi fazer um o mais simples e fácil de se utilizar possível. ^^
Botando as mãos na massa
Em primeiro lugar precisamos saber criar plugins pro
jQuery. Encontrei um excelente tutorial
aqui.
Ok, agora, segue o código do plugin do
slideshow (para manter o padrão, sugiro criar e inserir o código a seguir no arquivo
jquery.slideshow.js):
(function($){
$.fn.extend({
slideshow: function(options) {
var div = this;
var defaults = {
interval: 2000 };
var options = $.extend(defaults, options);
$('img', div).hide().first().show();
var timerId = timerSlide(div, options.interval);
$(div).hover(function() {
clearInterval(timerId);
}, function() {
timerId = timerSlide(div, options.interval); });
$(div).children('.navigator').each(function() {;
$(this).children('.prev').each(function() {
$(this).click(function() {
prevSlide(div); }); });;
$(this).children('.next').each(function() {
$(this).click(function() {
nextSlide(div); }); });; });
function timerSlide(div, interval) {
return setInterval(function() {
nextSlide(div);
}, interval); }
function prevSlide(div) {
var element = $('img', div).filter(function() { return $(this).css("display") == 'inline'; }).hide() .prev();
if($(element).attr("id") == undefined) {
element = $('img', div).last(); }
$(element).fadeIn('slow'); }
function nextSlide(div) {
var element = $('img', div).filter(function() { return $(this).css("display") == 'inline'; }).hide() .next();
if($(element).attr("id") == undefined) {
element = $('img', div).first(); }
$(element).fadeIn('slow'); } } });
})(jQuery);
Muito simples, né?
E para usa-lo é mais simples ainda.
Basta criar uma
div q possua a class
slideshow. As
imagens que tiverem dentro dessa div serão exibidas na ordem em que aparecem:
Agora é só incluir no load da página, a chamada para função
slideshow. O trecho a seguir, configura todos os div's que contem a
class slideshow:
$(function() {
$('.slideshow').each(function() {
$(this).slideshow();
});
});
Agora sim: simples, fácil e indolor! ;D
Mais algumas opções
Por padrão, o plugin é configurado para alternar os slides de 2000 em 2000 milisegundos. Se deseja outro valor, por exemplo 5000, basta informar o parâmetro interval:
$(function() {
$('.slideshow').each(function() {
$(this).slideshow({interval: 5000});
});
});
Se quiser incluir a função de navegação entre os slides, basta inserir uma nova
div com a class
navigation. Dentro dessa div, deve haver um
link com a class
prev e outro
link com a class
next. Dessa forma:
O resultado desse ultimo código é mais ou menos esse:
Prontinho. O plugin atende todos os requisitos! ^^
Agora é só usar!
;D
É isso!
PS: Reparei um comportamento estranho ao selecionar a div utilizando o
firebug. Aparenetemente, o javascript se perde e configura o setInterval diversas vezes, o que dá a impressão de que os slides estão alternando mais rápido. Por enquanto vou deixar assim, pois normalmente o usuário comum não sabe nem o que é
firefox, imagina só se ele sabe o que é
firebug! rs..
Marcadores: javascript, jquery, tutorial
