画像を切り替えるjQueryプラグイン「jquery.innerfade.js」

最近のWebサイト制作においては、ファーストビュー部分に画像が切り替わる看板的なパネルを配置することが結構あります。

その場合、jQueryプラグインを使うことが多いです。

そういったjQueryプラグインも数多くリリースされいています。

というわけで、過去に使ったことのある画像切り替え用のjQueryプラグイン「jquery.innerfade.js」をご紹介します。

概要

この「jquery.innerfade.js」の公式サイトは以下です。

https://medienfreunde.com/lab/innerfade/

私が作ったデモは以下

jquery.innerfade.jsデモ

画像だけではなく、テキストにもこの「jquery.innerfade.js」を使ってみました。

コードとしては、以下のようにします。

  • 切り替えたい画像またはテキストをulタグ、liタグで記述する
  • CSSでlistのマークを非表示にする(「list-style: none」)
  • 目的の要素に対し「$(‘#id名’).innerfade();」と記述する

実際に記述すると結構簡単です。

コードの解説

前述のデモのコードの重要部分を解説します。

HTML

<ul id="innerfade-image"> 
	<li><img src="img/innerfade_01.jpg" /></li>
	<li><img src="img/innerfade_02.jpg" /></li>
	<li><img src="img/innerfade_03.jpg" /></li>
</ul>

<ul id="innerfade-text"> 
	<li>content 1</li>
	<li>content 2</li>
	<li>content 3</li>
</ul>

すごく単純にulとliで列挙するだけです。

CSS

#innerfade-image,
#innerfade-text {
	list-style: none;
}

必須なのは「list-style: none;」だけです。他は必要に応じて。

JavaScript

$('#innerfade-image').innerfade({
	animationtype: 'slide',
	speed: 'fast',
	timeout: 3000,
	type: 'random_start',
	containerheight: '240px',
	runningclass: 'innerfade-image'
});

$('#innerfade-text').innerfade({
	animationtype: 'fade',
	speed: 'slow',
	timeout: 2000,
	type: 'sequence',
	containerheight: '1.5em',
	runningclass: 'innerfade-text'
});

とてもシンプルです。

オプション解説

オプションは6個しかありません。簡単に理解できるものばかりです。

オプション名 設定値 説明
animationtype fade か slide
(デフォルトはfade)
アニメーションのタイプです
speed msで指定するか slow か normal か fast
(デフォルトはnormal)
アニメーションのスピードです
timeout msで指定
(デフォルトは2000)
切り替わるまでの表示時間です
type sequence か random か random_start
(デフォルトはsequence)
切り替える要素の順序です
containerheight CSSのピクセル高さ指定
(デフォルトはauto)
表示高さです
runningclass class名をテキストで指定
(デフォルトはinnerfade)
ulに付加するclass名です

シンプルで使いやすい

自由度は低めですが、シンプルなので使いやすいと思います。

簡単に設置したいという方はぜひ。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます