JSONを利用したスライドショー

jQuery JavaScript 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//JSONファイルを読み込む
	$.getJSON('imgdata.json', function(jsonData){
		//img要素を生成し変数imgに設定し#slideshowに挿入
		$(jsonData.imgs).each(function(){
			var img = document.createElement("img");
			img.id = this.id;
			img.src = this.src;
			img.alt = this.name;
			$('#slideshow').append(img);
		})
		
		slideImages = $('#slideshow > img');
		slideImages.hide().filter(':first').show();
		$('#imagealt p').text(slideImages.filter(':first').attr('alt'));
		
		$('ul.imagelist li a').click(function(){
			if (this.className.indexOf('current') == -1) {
				slideImages.hide();
				slideImages.filter(this.hash).fadeIn(500);
				$('ul.imagelist li a').removeClass('current');
				$(this).addClass('current');
				$('#imagealt p').text(slideImages.filter(this.hash).attr('alt'));
			}
			return false;
		});
	});
});
</script>
<style type="text/css">
body {
	text-align:center;
}
#slideshow {
    position: relative;
	margin:0 auto 5px auto;
    background: #fff;
    width: 360px;
    height: 258px;
    border: 1px solid #eee;
}
#slideshow img {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    background: #fff;
}
#imagealt {
	background:#eee;
	width:360px;
	margin:0 auto 5px auto;
	border-top:1px #fff solid;
	border-bottom:1px #fff solid;
}
#imagealt p {
	padding:5px;
}
.imagelist {
	width:360px;
    margin:0 auto;
}
.imagelist li {
    display: inline;
}
.imagelist li a, .imagelist li a:visited {
    display: block;
    float: left;
    background: #eee;
    padding: 4px 8px;
    margin-right: 1px;
    color: #426579;
    text-decoration: none;
}
.imagelist li a:hover, .imagelist li a:visited:hover {
    background: #5b7e91;
    color: #fff;
}
.imagelist li a.current {
    background: #426579;
    color: #fff;
}
</style>
</head>
<body>
<div id="slideshow">
</div>
<div id="imagealt"><p></p></div>
<ul class="imagelist">
	<li><a class="current" href="#image1">1</a></li>
	<li><a href="#image2">2</a></li>
	<li><a href="#image3">3</a></li>
	<li><a href="#image4">4</a></li>
	<li><a href="#image5">5</a></li>
</ul></body>
</html>