切り替えタイミングがわかる画像ギャラリーJavaScript「Presentation Cycle with a progressbar」

画像ギャラリーのJavaScriptは結構ありますが、画像間の切り替えタイミングがわかりにくかったです。
jQueryプラグインのPresentation Cycle: Cycle with a progressbar - Gaya Designを利用すると、あとどれくらいで切り替わるかが明示されるので、非常にわかりやすいです。
切り替えタイミングがわかる画像ギャラリーJavaScript「Presentation Cycle with a progressbar」サンプル

使用方法
Presentation Cycle: Cycle with a progressbar - Gaya Designからファイル一式をダウンロードします。
<link rel="stylesheet" type="text/css" href="presentationCycle.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="presentationCycle.js"></script>

上記を記述したら下記のようにスライド部分を書けば完成です。
<div id="presentation_container" class="pc_container">
<!-- ここからスライド1 -->
<div class="pc_item">
<div class="desc">
テキストテキストテキスト
</div>
<img src="画像パス" />
</div>
<!-- ここまでスライド1 -->
<!-- 以下複製 -->
</div>
<script type="text/javascript">
presentationCycle.init();
</script>


切り替えタイミングがわかる画像ギャラリーJavaScript「Presentation Cycle with a progressbar」サンプル

sponsors

「切り替えタイミングがわかる画像ギャラリーJavaScript「Presentation Cycle with a progressbar」」をシェアする

記事作成:
記事URL:

TOP > > > 切り替えタイミングがわかる画像ギャラリーJavaScript「Presentation Cycle with a progressbar」