skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

いいね!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><amp-img src="画像パス1" /></div>
<div><amp-img src="画像パス2" /></div>
<!-- 画像分 -->
</div>
<div class="arrow-left"><amp-img src="arrow-left.png" alt="" /></div>
<div class="arrow-right"><amp-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」

前の記事:
次の記事:フォームの入力エラーをわかりやすくする「Form validation using jQuery」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more