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

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

使用方法
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を変更ください。

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

sponsors

「いいね!Android Marketチックな画像スライド「Twilight Slideshow」」をシェアする

記事作成:
記事URL:

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