FLASHを使わずに、画像をスライドショーのように表示することができる「Simple jQuery Slideshow Plugin」をTOP画面のイメージに使ってみました。
１・まずは、こちらからコード一式をダウンロード。
必要なScript（jquery.js jquery.slideshow.js）およびdemo用のファイル（HTML CSS）が含まれています。
http://www.matto1990.com/jquery/slideshow/
２・HTMLコードの追加
demo用のHTMLを参考にしてコードを書いていきます。（demo用にはPause機能もありますが以下では省略しています。）
HEAD部
<script type=”text/javascript” src=”./scripts/jquery.js”></script>
<script type=”text/javascript” src=”./scripts/jquery.slideshow.min.js”></script>
<script type=”text/javascript” src=”./scripts/jquery.slideshow.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#slideshow’).slideshow({
timeout: 2000, ← 1画像の表示時間
fadetime: 2000, ← 画像の切替わりにかかる時間
type: ‘sequence’,
});
});
</script>
BODY部
<div id=”slideshow”>
<img src=”sample1.jpg” />
<img src=”sample2.jpg” />
<img src=”sample3.jpg” />
</div>
<img src=”sample1.jpg” />
<img src=”sample2.jpg” />
<img src=”sample3.jpg” />
</div>
これで完成。
あとは動作を確認して、表示時間などを調節すればOKです！
