Три кита: код на JavaScript, разметка HTML, стили CSS.

1. JavaScript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // показываем картинки по-очереди, одна за другой
    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');

    // если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {$active.removeClass('active last-active');});
};

$(function() {
    setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});

2. HTML

<div id="slideshow">
    <img src="image_1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image_2.jpg" alt="Slideshow Image 2" />
    ...............................................
    <img src="image_n.jpg" alt="Slideshow Image n" />
</div>

3. CSS

#slideshow { position:relative; height:350px; }
#slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; }
#slideshow IMG.active { z-index:10; opacity:1.0; }
#slideshow IMG.last-active { z-index:9; }

Класс стиля class=«active» можно изначально назначать на желаемую картинку. Параметр height:350px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.