jQuery を使って、画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショーを紹介します。
簡単に設置できることはもちろん、JavaScript、HTML、CSS がすべて短いコードで書かれているのが特徴です。

百聞は一見に如かず。まずはサンプルをご覧ください。

クロスフェードで切り替わるシンプルな画像スライドショー：
サンプルデモ

jQuery依存なので、まずはHTMLの <head>〜<head> 内でjQueryを読み込みます。

<head>
<script src="/js/jquery.js"></script>
<head>

JavaScript の書き方

$(function(){
// 設定
var $width =640; // 横幅
var $height =300; // 高さ
var $interval = 3000; // 切り替わりの間隔（ミリ秒）
var $fade_speed = 1000; // フェード処理の早さ（ミリ秒）
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
$("#slide ul li:first").addClass("active").show();
setInterval(function(){
var $active = $("#slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});

CSS の書き方

#slide {
width:640px;
height:300px;
margin:0 auto;
position:relative;
}
#slide img {
position:absolute;
left:0;
top:0;
}

HTML の書き方

<div id="slide">
<ul>
<li><a href=""><img src="../images/sample-01.png" alt="" width="640" height="300" /></a></li>
<li><a href=""><img src="../images/sample-02.png" alt="" width="640" height="300" /></a></li>
<li><a href=""><img src="../images/sample-03.png" alt="" width="640" height="300" /></a></li>
</ul>
</div>

以上。
画像のリンクとアンカータグを設定し直せばスグ動きます。
ぜひお試しください。

クロスフェードで切り替わるシンプルな画像スライドショー：
サンプルデモ

関連本。jQueryについて学ぶなら、こちらの書籍がオススメです。

jQuery最高の教科書