demo

ボタンでスライドするバージョンもつくりました→

html+cssの作成

bannerというidを付けたdivにリストでマークアップした表示する画像を入れます。
画像は全て同じサイズの方が良いでしょう。ここでは320×213の画像を4枚用意しました。

html

		<div id="banner">
			<ul>
				<li><a href="img/01.jpg"><img src="img/01.jpg" width="320" height="213" /></a></li>
				<li><a href="img/02.jpg"><img src="img/02.jpg" width="320" height="213" /></a></li>
				<li><a href="img/03.jpg"><img src="img/03.jpg" width="320" height="213" /></a></li>
				<li><a href="img/04.jpg"><img src="img/04.jpg" width="320" height="213" /></a></li>
			</ul>
		</div>

次にcssです。リストはfloatで横並びにして、divは画像と同じサイズのwidthにして「overflow: hidden」を指定すれば1枚だけ表示されますね。
ulのwidthは全部の画像サイズを入れます。今回は312pxの画像を4枚使用しているので1280pxですね。

css

		#banner {
			border: 3px solid #CCCCCC;
			overflow: hidden;
			width:320px;
			margin-bottom: 5px;
		}
		#banner ul {
			list-style: none;
			width: 1280px;
		}
		#banner ul li {
			float: left;
			width: 320px;
		}
		#banner ul li img {
			vertical-align: bottom;
		}

使用するメソッドについて

「setInterval」は一定の間隔（時間）で処理を実行するメソッドです。
例えば「id=log」に1秒おきに「hoge」を追加したいというときはこんな感じになります。

setIntervalメソッド

		setInterval(function(){
			$("#log").append("hoge");
		}, 1000);

「animate」は文字通りですがアニメーション効果をお手軽に再現してくれます。
上記でマークアップした画像リストを一枚分だけ左にスライドさせたい場合はこうなります。

animateメソッド

		$("#banner ul").animate({
			marginLeft : "-320px"
		},"normal");

第2引数には「slow」「normal」「fast」または数値入力でアニメーション速度を制御することができます。
ただこれだといくら実行しても-320pxからは動きません。次々にスライドさせるには現在の位置から-320pxに移動させる必要があるんですね。
現在の属性値はmargin-leftで取得することができますが、そのままでは「px」が入ってしまうので計算することができません。「parseInt」メソッドを使用すれば数値だけを取得することができます。
ulの現在の「margin-left」を数値としてを取得する場合はこうです。

parseIntメソッド

		alert(parseInt($("#banner ul").css("margin-left")));

これらの組み合わせればなんだか出来そうです。

最終的なコード

あとは現在の画像の番号を見て、最後まできたら最初の画像に戻るという処理を入れるだけですね。

javascript

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
		$(function(){
			var imgNum = 4;		//画像の枚数
			var imgSize = 320;	//画像のサイズ
			var time = 2000;	//切り替えのタイミング
			var current = 1;	//現在の画像
			setInterval(function(){
				if( current < imgNum ) {
					current++;
				    $("#banner ul").animate({
						marginLeft : parseInt($("#banner ul").css("margin-left"))-imgSize+"px"
					},"fast");
				//最後の画像にきたら最初に戻る
				} else {
					 $("#banner ul").animate({
						marginLeft : parseInt($("#banner ul").css("margin-left"))+(imgSize * (imgNum-1))+"px"
					},"fast");
					current = 1;
				}
			}, time);
		});
		</script>