Estudando como os sliders são feitos, eu comecei a refatorar um código de um plugin chamado jMask.
A principio eu cheguei nessa solução:
(function ($) {
$.fn.jMask = function (options) {
var $this = $(this);
var pic = $this.find("IMG");
var tot = pic.length-1;
var num = tot;
setInterval(function () {
var $active = $this.find("IMG.active");
if ($active.length == 0) $active = $this.find("img:last");
var $next = $active.next().length ? $active.next() : $this.find("img:first");
$this.animate({ height: $next.height() }, 1000, function () {
$active.addClass('last-active');
$next.css({ opacity: 0.0 }).addClass('active').animate({ opacity: 1.0 }, 1000, function () {
$active.removeClass('active last-active');
});
});
}, 5000);
}
})(jQuery);
Nesse cenário, pegamos todas as imagens que estiver dentro do container e vamos apenas fazendo um next, last, first...Filé neh!!!
Mas por uma questão de performance e deixar o código mais injuto, pensei na seguinte implementação:
(function ($) {
$.fn.jMask = function (options) {
var $this = $(this);
var pic = $this.find("IMG");
var tot = pic.length-1;
var num = tot;
setInterval(function () {
num = (num || tot);
$this.animate({ opacity: 0 }, 'slow', function () {
$this.css({ "background-image": "url('" + pic.eq(num--).attr("src") + "')" }).animate({ opacity: 1 });
});
}, 5000);
}
})(jQuery);
O css fica mais ou menos assim:
.slideshow {
text-align:center;
z-index: 11;
overflow:hidden;
display:block;
height: 250px;
width:100%;
background-position: center top;
background-repeat: no-repeat;
}
.slideshow IMG
{
text-align: center;
margin: 0 auto;
display: none;
overflow:hidden;
}
$(".slideshow").jMask();
Espero que sirva!