いいね!Android Marketチックな画像スライド「Twilight Slideshow」

Android マーケットのようにメイン画像を大きく、前後の画像は透明にして横に並べるスライドは印象的で、クリック率の向上に役立ちそうです。
今回はこれをjQueryで実現するTwilight Slideshowを紹介します。
スマフォ端末でフルスクリーンで表示させると面白そうです。

sponsors

使用方法

Twilight Slideshowからファイル一式をダウンロード。

<link rel="stylesheet" type="text/css" href="twilight.css" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>	
<script src="twilight.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	$('.twilight-show').twilight({
		animTime:500, //前後スライドへの切り替え速度
		animFadeTime:200 //初期に左右をフェードさせる速度
	});
});
</script>
あとは画像を記述すれば完成です。

<div class="twilight-show">
	<div class="twilight-box">
		<div><img src="画像パス1" /></div>
		<div><img src="画像パス2" /></div>
		<!-- 画像分 -->
	</div>
	<div class="arrow-left"><img src="arrow-left.png" alt="" /></div>
	<div class="arrow-right"><img src="arrow-right.png" alt="" /></div>
</div>
画像サイズに応じて、twilight.cssを変更ください。

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors