jquery.crossFader.js (jQueryプラグイン) デモページ

HTML(画像にリンクを設定しない場合)

<div id="fader1" class="crossfader">
	<img src="img1.jpg" class="active" />
	<img src="img2.jpg" />
	<img src="img3.jpg" />
	<img src="img4.jpg" />
</div>

基本パターン#fader1

img-1 img-2 img-3 img-4
$('#fader1').crossFader();

オプション(スピード調整)#fader2

img-1 img-2 img-3 img-4
$('#fader2').crossFader({
	timer: 3000,
	speed: 1000,
	changeSpd: 400
});

オプション(読込時に画像をランダム表示)#fader3

img-1 img-2 img-3 img-4
$('#fader4').crossFader({
	random: true
});

オプション(ループさせない)#fader4

img-1 img-2 img-3 img-4
$('#fader4').crossFader({
    loop: false
});

オプション(クリック時の切替処理を無効)#fader5

img-1 img-2 img-3 img-4
$('#fader5').crossFader({
    clickStep: false
});

HTML(画像にリンクを設定する場合)

<div id="fader6" class="crossfader">
	<a href="#1"><img src="img1.jpg" class="active" /></a>
	<a href="#2"><img src="img2.jpg" /></a>
	<a href="#3"><img src="img3.jpg" /></a>
	<a href="#4"><img src="img4.jpg" /></a>
</div>

基本パターン#fader6

img-1 img-2 img-3 img-4
$('#fader6').crossFader();

HTML(手動でフェード開始させる場合)


<div id="fader7" class="crossfader">
 <img src="img1.jpg" alt="img-1" class="active" />
 <img src="img2.jpg" alt="img-2" />
 <img src="img3.jpg" alt="img-3" />
 <img src="img4.jpg" alt="img-4" />
 <div class="startBtn"><p><a href="javascript:void(0);">START</a></p></div>
</div>

基本パターン#fader7

$('#fader7').crossFader({
	autoStart: false
});

ページの先頭へ戻る