jquery.cycle.js:画像切替り(サムネイル、次へ・前へ)が実装可能なjs



サイトのトップページで良く見かける画像切替り(クロスフェード)のjsで、
「画像サムネイル」、「次へ・前へ」、「自動切替り」を実装させるための記述を以下にメモします
 

画像切替りJavaScriptの記述 例

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript">
$(function() {
    $('#メイン画像切替りを行うid').after('<ul id="idUl01">').cycle({
	        fx:     'fade',
		speed:100,
	        timeout: 3000,
		pause: 1,
		prev: '#prev',	//前へ
		next: '#next',	//次へ
        	pager: '#idUl01',	//サムネイルid
	        pagerAnchorBuilder: function(idx, slide) {
		return '<li><a href="#"><img src="images/main'+(idx+1)+'.jpg" width="50" /></a></li>';	//サムネイル画像
        }
    });
});
</script>

※以下、htmlやcssは雰囲気で記述してまして、もしかしたらコピペしても動かない可能性があります。
 その際は調整してみて下さい。
 

htmlの記述例

<div id="メイン画像切替りを行うid">
<div class="slide"><a href="#"><img src="images/main1.jpg"></a></div>
<div class="slide"><a href="#"><img src="images/main2.jpg"></a></div>
<div class="slide"><a href="#"><img src="images/main3.jpg"></a></div>
</div>

<ul>
<li id="prev"><a href="#"><img src="images/prev.jpg" alt="前へ" /></a></li>
<li id="next"><a href="#"><img src="images/next.jpg" alt="次へ" /></a></li>
</ul>

 

メイン画像とサムネイル箇所のCSS記述例

#メイン画像切替りを行うid{
	width:800px;
	height:100px;
	overflow:hidden;
}
#メイン画像切替りを行うid li{
	float:left;
	width:100px;
}
#メイン画像切替りを行うid a{
	width:100px;
}
#メイン画像切替りを行うid li.activeSlide a {
	opacity:0.7;
	-moz-opacity:0.7;
	filter:alpha(opacity=70);
}
#メイン画像切替りを行うid li.activeSlide a img{
	opacity:0.7;
	-moz-opacity:0.7;
	filter:alpha(opacity=70);
}
#メイン画像切替りを行うid a:focus{
	outline: none;
}
#メイン画像切替りを行うid img{
	border: none;
	display: block;
}

 
ソース元:jQuery Cycle Plugin