メイン画像の下にサムネイルを設置したスライドショーです。
carouFredSel を使っているので、先にjqueryとjquery.carouFredSel-6.2.1.jsを読み込みます。
サムネイルの位置や大きさはCSSで変更できます。
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; }