felipehuggler.com

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!