カルーセルとは回転木馬（メリーゴーランド）のことで、WEBではサムネイルが列をなして移動していくことを指している。 カルーセルの実装はcarouFredSelプラグインを使って行うことにした。
使い方はJQuery入門を参照。

1.CSS

.thumb-wrapper {
		margin:20px 20px 20px 50px;
		padding:10px 20px;
		background-color:#ddd;
		width:580px;
		overflow:visible;
		position: relative;
}
#thumbNails ul {
		margin:0;
		padding:0;
}
#thumbNails ul li{
		list-style:none;
		display:block;
		float:left;
}
#thumbNails li img {
		margin:5px 5px 1px 5px;
}
#thumbNails a img {
    border-style:none;
}
.carouPrev, .carouNext {
		width: 50px;
		height: 50px;
		display: block;
		position: absolute;
		top: 40px;
		cursor:pointer;
}
.carouPrev {
		left:-50px;
		background:url(./images/prev.png) no-repeat;
		background-position: 0 0;
}
.carouNext{
		right: -50px;
		background:url(./images/next.png) no-repeat;
		background-position: 0 0;
}
.carouPrev:hover, .carouNext:hover {
		background-position: 0 -50px;
}
.carouPrev.disabled , .carouNext.disabled  {
		cursor: default;
		background-position: 0 -100px;
}
.carouPage {
		text-align: center;
}
.carouPage a {
		margin:5px;
		text-decoration:none;
}
.carouPage a.selected {
		font-weight:bold;
		background-color:#00ff7f;
}

2.JavaScript

$(function(){
  var url = 'https://shiba-sub2.sakuraweb.com/jquery/dspmov/picdef.xml';
  var http = new JKL.ParseXML( url );
  var doc = http.parse();
  // 結果XMLから<customer>要素を取得
  nodes = doc['root']['customer'];
  if(nodes.length > 0) {  /* 登録結果が1件以上の場合 */
		var ul = $('#thumbNails ul');
	  for(var i=0; i<nodes.length; i++){
	 	 	var li = $('<li>');
	    var thmb_path = nodes[i]['thmb'];
	    var file_path = nodes[i]['name'];
	    var title_name =  nodes[i]['title'];
	    var ank = $('<a>').attr({href: file_path});
	    var thmb_img = $('<img>').attr({src: thmb_path,
                                    	width:105,
                                    	height:100,
                                    	title:title_name
                                   	});
	    ank.append(thmb_img);
	    li.append(ank);
	    ul.append(li);
		}
		var carouObj = new Object();
		carouObj.auto = false;
		carouObj.circular = false;
		carouObj.infinite = false;
		carouObj.prev = ".carouPrev";
		carouObj.next = ".carouNext";
		carouObj.pagination = ".carouPage";
		$("ul").carouFredSel(carouObj);
	}
});

3.HTML

<div class="thumb-wrapper">
	<div id="thumbNails">
		<ul>
		</ul>
		<div class="carouPrev"></div>
		<div class="carouNext"></div>
		<div class="carouPage"></div>
	</div>
</div>

サンプル