Download

SwitchAmimeChan（GitHub）

Demo

SwitchAmimeChanの利用イメージをご紹介します。
背景を変更してみる：■■■

Principal Benefit

SwitchAmimeChanは、複数の画像を使ってパラパラアニメを作ることができます。次のような特長があります。

• カンタン設置でパラパラアニメが作れます。
• 切り替えにフェード効果を採用し、ふわっとアニメーションします。（Chrome, Firefox, Safari, IE9+）
• 色々なサイトになじむ、シンプルなデザイン。
• 画像プリロード＆ローディング表示機能でちょっぴりリッチ。
• 各ブラウザに対応。（Chrome, Firefox, Safari, IE7+）

How to use?

SwitchAmimeChanの基本の使い方をご紹介します。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- SlideChan Javascript file -->
<script type="text/javascript" src="jquery.switchanimechan.js"></script>
<!-- SlideChan CSS file -->
<link rel="stylesheet" href="jquery.switchanimechan.css">

<div id="switchAnimeChan">
	<div class="switchAnimeChan-frame">
		<img src="img/4.png">
		<img src="img/3.png">
		<img src="img/2.png">
		<img src="img/1.png">
	</div>
	<div class="switchAnimeChan-frame">
		<img src="img/8.png">
		<img src="img/7.png">
		<img src="img/6.png">
		<img src="img/5.png">
	</div>
</div><!-- /switchAnimeChan -->

<script type="text/javascript">
$(function(){
	$('#switchAmimeChan').switchAnimeChan();
});
</script>

Options

SlideChanのオプション項目は次のとおりです。何も指定しなかった場合は、次のパラメータがセットされます。

<script type="text/javascript">
$(function(){
	$('#slideChan').slideChan({
		frameRate : 500,
		frameFadeTime : 300,
		frameSelector: '.switchAnimeChan-frame',
		autoLoop : false,
		switchSec : 4000,
		naviButtonUse: true,
		naviButtonSelector: '',
		naviButtonPosition: 'inner'
	});
});
</script>

frameRate: 数値

パラパラアニメのコマ切り替え時間を設定します。

frameFadeTime: 数値

フェード効果の効果時間を設定します。

frameSelector: 'クラス名'

スライド1枚分のブロックにあたるクラス名を変更します。

autoLoop: true or false

スライドショーの自動再生機能を有効にします。

switchSec: 数値

autoLoopが有効な時、スライドが次のスライドに切り替わるまでの時間を設定します。

naviButtonUse: true or false

スライド番号切り替えボタンを無効・非表示にします。

naviButtonSelector: 'ID名'

デフォルトのスライド番号切り替えボタンを無効にし、「スライド番号切り替え」機能を指定のID要素に付加します。
カスタムスライド番号切り替えボタンは<ul>タグで作成し、<li>をスライドの数だけ追加します。
この例の場合、「#custom-naviButton」をオプションパラメータに設定します。

<ul id="custom-naviButton">
	<li>任意のテキスト</li>
	<li>サムネイル画像でもOK</li>
	<li>liの個数はスライドフレームの数と合わせます</li>
</ul>

naviButtonPosition: 'inner' or 'outer'

デフォルトのスライド番号切り替えボタンの表示位置（スライド内 or スライド外）を切り替えます。

♥ Share

• Tweet
•