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

デモページへopen_in_new

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>
$(function() {
$('.mod_carousel ul').carouFredSel({
auto      : 4000,
items: 1,
scroll: {
items  : 1,
//easing : "swing",
fx : "crossfade",
duration  : 800 
},
pagination: {
container: '.mod_pager',
anchorBuilder: function( nr ) {
var src = $("a img",this).attr('src');
return '<a href="#" class="new_thumb' + nr + '"><img src="' + src + '" width="150px" /><span></span></a>';
}
}
});
});
</script>

HTMl

<div class="mod_mainslide">
<div class="mod_carousel">
<ul>
<li><a href="#"><img src="img/slide_01.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_02.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_03.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_04.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_05.jpg" width="960" height="350" alt="" /></a></li>
</ul>
<!-- /new_carousel --></div>
<div class="mod_pager"></div>
<!-- /mod_mainslide --></div>

CSS

.mod_mainslide {
 width:960px;
 margin:50px auto 0 auto;
}
.mod_carousel ul{
 height:350px;
 overflow:hidden;
}
.mod_carousel li { 
 width:960px;
 display: block;
 float: left;
}
.mod_pager{
 margin:10px 0 0 0;
 text-align:center;
}
.mod_pager a{
 margin:0 5px 0 5px;
 border:solid 1px #999;
 display:inline-block;
}
.mod_pager a.selected{
 border:solid 1px #333;
}