最近の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個しかありません。簡単に理解できるものばかりです。

シンプルで使いやすい

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

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