フェード効果のスライドショーを簡単に実装できる「jqeury.simpleSlideShow.js」

お世話になってるjQueryプラグインの一つ、simpleSlideShowです。
多機能で複雑なものではなく、単純にフェードイン・フェードアウトで次々と画像を表示できるスクリプトで、動作も軽快です。

DOWNLOAD

設置方法

設置は簡単。
ヘッダにjQuery本体と、jquery.simpleSlideShow.jsを読み込ませます。
※WordPressに設置する場合のサンプルです。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php bloginfo('template_url')?>/js/jquery.simpleSlideShow.js"></script>

HTML

設置したい場所に下記のコードを記述。画像は何枚でもOK！
各画像を<a>タグで囲めば、それぞれにリンクを設定することも可能。

<div class="simpleSlideShow">
　<img src="<?php bloginfo('template_url')?>/img/img1.jpg" alt="" />
  <img src="<?php bloginfo('template_url')?>/img/img2.jpg" alt="" />
  <img src="<?php bloginfo('template_url')?>/img/img3.jpg" alt="" />
</div>

CSSの編集

CSSもたったこれだけです。

.fade img {
	display: none;
}
.slide {
	overflow: hidden;
}
.simpleSlideShowWrapper {
	margin: 0 auto;
	position: relative;
}
.simpleSlideShowWrapper img {
	position : absolute;
	left: 0;
	top: 0;
}

コントロールパラメーター

あとはコントロールをヘッダに記述すれば完成。画像サイズは適宜変更してください。基本的に使用する全ての画像サイズを合わせる必要があります。

<script>
$(function() {
  $('.simpleSlideShow').SimpleSlideShow({
    'height' : 630, // ステージの高さ。デフォルトでは1枚目の画像の高さ。
    'width'  : 394, // ステージの横幅。デフォルトでは1枚目の画像の横幅。
    'duration' : 1000, // アニメーションにかかる時間。
    'interval' : 3000  // 次のアニメーションまでのインターバル。
  });
});
</script>

作者さんのサイトはこちら
最新バージョンでは、スライドタイプをスクロールにしたり、サムネイル画像付き、キャプション付きなどオプションが増えて更に便利に使えますが、とにかくシンプルに使いたい場合は上記内容で簡単に実装できます。

Category　：　jQuery