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

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

sponsors

使用方法

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>

サンプル

Server Park

Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi ligula ut nunc.
slide1

iPhone Apps

Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi ligula ut nunc.
slide2

Wordpress Extensions

Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi ligula ut nunc.
slide3

City Skyline

Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi ligula ut nunc.
slide4

Mario Finds Peach

Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi ligula ut nunc.
slide5

Said and Done

Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi ligula ut nunc.
slide6

sponsors


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