jQueryでイメージギャラリーを作成。

<style type="text/css">

#imagegallery {

	width:486px;

	background-color:#fff;

}

#imagegallery *{

	margin:0;

	padding:0;

	border:0;

}

#imagegallery img {

	padding:3px;

	background-color:#ccc;

	vertical-align:bottom;

}

#imagegallery li {

	float:left;

	margin:0px 3px 3px 0px;

}

#imagegallery #navi {

	margin:0 auto;

	width:387px;

	overflow:hidden;

}

#imagegallery #navi p {

	width:387px;

	margin-right:3px;

	text-align:center;

	clear:left;

}

#imagegallery #navi p img {

	padding:0;

	background-color:#fff;

}

#imagegallery img.prev,#imagegallery img.next {

	cursor:pointer;

}

#imagegallery #navi #pageWrap {

	width:1161px;

}

#imagegallery #navi .page {

	width:387px;

	float:left;

}

#imagegallery #main {

	height:366px;

	clear:left;

}

#imagegallery #main img {

	position:absolute;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	$("#imagegallery #navi a").click(function(){

		$("#imagegallery #main img").before("<img src='"+$(this).attr("href")+"' width='480px' height='360px' alt='' />");

		$("#imagegallery #main img:not(:first)").fadeOut(1000,function(){

			$(this).remove();

		});

		return false;

	});

	$("#imagegallery #navi .next").click(function(){

		$("#imagegallery #pageWrap").animate({

			marginLeft : parseInt($("#imagegallery #pageWrap").css("margin-left"))-387+"px"

		},500);

	});

	$("#imagegallery #navi .prev").click(function(){

		$("#imagegallery #pageWrap").animate({

			marginLeft : parseInt($("#imagegallery #pageWrap").css("margin-left"))+387+"px"

		},500);

	});

})

</script>

<div id="imagegallery">

	<div id="navi">

		<div id="pageWrap">

			<div class="page">

				<ul>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0001.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0001.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0002.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0002.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0003.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0003.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0004.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0004.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0005.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0005.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0006.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0006.jpg" width="120px" height="90px" alt="" /></a></li>

				</ul>

				<p><img src="http://www.naganoblog.jp/usr/webdesign/space.png" width="40px" height="40px" alt="" /> <img class="next" src="http://www.naganoblog.jp/usr/webdesign/next.png" width="40px" height="40px" alt="next" /></p>

			</div>

			<div class="page">

				<ul>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0007.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0007.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0008.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0008.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0009.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0009.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0010.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0010.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0011.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0011.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0012.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0012.jpg" width="120px" height="90px" alt="" /></a></li>

				</ul>

				<p><img class="prev" src="http://www.naganoblog.jp/usr/webdesign/prev.png" width="40px" height="40px" alt="prev" /> <img class="next" src="http://www.naganoblog.jp/usr/webdesign/next.png" width="40px" height="40px" alt="next" /></p>

			</div>

				<div class="page">

				<ul>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0013.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0013.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0014.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0014.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0015.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0015.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0016.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0016.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0017.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0017.jpg" width="120px" height="90px" alt="" /></a></li>

					<li><a href="http://www.naganoblog.jp/usr/webdesign/wc0018.jpg"><img src="http://www.naganoblog.jp/usr/webdesign/wc0018.jpg" width="120px" height="90px" alt="" /></a></li>

				</ul>

				<p><img class="prev" src="http://www.naganoblog.jp/usr/webdesign/prev.png" width="40px" height="40px" alt="prev" /> <img src="http://www.naganoblog.jp/usr/webdesign/space.png" width="40px" height="40px" alt="" /></p>

			</div>

		</div>

	</div>

	<div id="main">

		<img src="http://www.naganoblog.jp/usr/webdesign/wc0001.jpg" width="480px" height="360px" alt="" />

	</div>

</div>