【jQuery】複数の画像をスライドショーで表示する ～ Cycleの使用　～

jQuery

デモ

http://malsup.com/jquery/cycle/anchor.html

ダウンロード

http://malsup.com/jquery/cycle/download.html

項目

 * timeout: 画像が切り替わる時間
 * pause: 0 は「ウスを乗せるとスライドが停止なし」、1 は「停止する」 
 * autostop: 0 は「ストップなし」、1 は「ストップする」
 * autostopCount:何枚目の画像でストップするか

サンプル

<html>
<head>
<title>sample</title>
<script type="text/javascript" src="./js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.js"></script>
<script type="text/javascript">
jQuery(function() {
	$('.s1').cycle({ 
	    fx:     'fade',
	    timeout: 2000,
	    speed:  2500,
	    pause:  1
	});
});
</script>
<style type="text/css">
.floatLeft {
	float:left;
}
</style>
</head>
<body>
<div class="s1 floatLeft">
	<img src="./images/mono/01.jpg" border="0" />
	<img src="./images/01.jpg" border="0" />
</div>
<div class="s1">
	<a href="http://yahoo.co.jp"> src="./images/02.jpg" border="0" /></a>
	<a href="http://yahoo.co.jp"> src="./images/02.jpg" border="0" /></a>
</div>
</body>
</html>

イベントなどについて

http://jquery.malsup.com/cycle/options.html
http://alphasis.info/2011/08/jquery-cycle-before-after/

参考文献

http://semooh.jp/jglycy/jquery-plugins/cycle
http://alphasis.info/2011/07/jquery-cycle/
http://st0272.net/cn_blog/2011/09/jquery-cycle-plugin/
http://web-kobo.com/blog/archives/2010/12/entry-197.html
http://web-usability.jp/169

関連記事

複数画像を切り替える ～ jCarouselLite の使用　～

http://blogs.yahoo.co.jp/dk521123/24754786.html

複数画像を切り替える ～ Slider Kit の使用（１）　～

http://blogs.yahoo.co.jp/dk521123/26631495.html

自動再生で切り替える ～ Slider Kit の使用（２）　～

http://blogs.yahoo.co.jp/dk521123/27641589.html

自動再生で画像を表示させる ～ Photo Slider の使用　～

http://blogs.yahoo.co.jp/dk521123/27638967.html

複数の画像をスライドショーで表示する ～ Cycleの使用　～

http://blogs.yahoo.co.jp/dk521123/27660372.html

フェードイン・アウトで表示する ～ Innerfade の使用　～

http://blogs.yahoo.co.jp/dk521123/27646370.html