carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー

JSを読み込みます

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/jquery.carouFredSel-6.2.1.js"></script>

JavaScript

<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
$(function() {
	$('#thumbs').carouFredSel({
		synchronise: ['#images ul', false, true],
		auto: true,
		width: 719,
		items: {
			visible: 5,
			start: -2
		},
		scroll: {
      items : 1,
			onBefore: function( data ) {
				data.items.old.eq(2).removeClass('selected');
				data.items.visible.eq(2).addClass('selected');
			}
		},
		prev: '#prev',
		next: '#next'
	});
 
	$('#images ul').carouFredSel({
		auto: false,
		items: 1,
		scroll: {
			fx: 'crossfade'
		}
	});
 
	$('#thumbs img').click(function() {
		$('#thumbs').trigger( 'slideTo', [this, -2] );
	});
	$('#thumbs img:eq(2)').addClass('selected');
});});
</script>

HTMl

<div id="slidewrapper">
	<div id="images">
<ul>
    <li><a href="#"><img src="img/slide_01.jpg" width="719" height="354" alt=""></a></li>
    <li><a href="#"><img src="img/slide_02.jpg" width="719" height="354" alt=""></a></li>
    <li><a href="#"><img src="img/slide_03.jpg" width="719" height="354" alt=""></a></li>
    <li><a href="#"><img src="img/slide_04.jpg" width="719" height="354" alt=""></a></li>
    <li><a href="#"><img src="img/slide_05.jpg" width="719" height="354" alt=""></a></li>
    <li><a href="#"><img src="img/slide_06.jpg" width="719" height="354" alt=""></a></li>
    <li><a href="#"><img src="img/slide_07.jpg" width="719" height="354" alt=""></a></li>
</ul>
	</div>
	<div id="thumbs">
    <img src="img/slide_01.jpg" width="110" height="54" alt="">
    <img src="img/slide_02.jpg" width="110" height="54" alt="">
    <img src="img/slide_03.jpg" width="110" height="54" alt="">
    <img src="img/slide_04.jpg" width="110" height="54" alt="">
    <img src="img/slide_05.jpg" width="110" height="54" alt="">
    <img src="img/slide_06.jpg" width="110" height="54" alt="">
    <img src="img/slide_07.jpg" width="110" height="54" alt="">
	</div>
	<a id="prev" href="#"></a>
	<a id="next" href="#"></a>
</div>

CSS

/* slidewrapper */
#slidewrapper {
  position: relative;
  background-color: #fff;
  border: 1px solid #C9CACA;
  width: 719px;
  height: 449px;
  overflow: hidden;
}
#slidewrapper ul li {
  display: block;
  float: left;
}
#images { overflow: hidden; }
#thumbs {
  height: 70px;
  overflow: hidden;
}
#images {
  width: 721px;
  height: 354px;
}
#thumbs { }
#thumbs img {
  width: 110px;
  height: 54px;
  margin: 20px 7px 0 7px;
  cursor: pointer;
}
#thumbs img.selected {
  opacity: 0.8;
  -ms-filter: "alpha( opacity=80 )";
  filter: alpha(opacity=80);
}
#prev {
  width: 15px;
  height: 21px;
  display: block;
  background: transparent url("../img/bg_carousel_right.png") no-repeat 0 0;
  position: absolute;
  left: 695px;
  bottom: 37px;
}
#next {
  width: 15px;
  height: 21px;
  display: block;
  background: transparent url("../img/bg_carousel_left.png") no-repeat 0 0;
  position: absolute;
  left: 15px;
  bottom: 37px;
}