リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ スライドショーサンプル4

JavaScript

スライドショーサンプル4

JavaScriptを使用したスライドショーサンプル。

サンプルを見る
サンプルをダウンロード(zip)

スライドショーサンプル3に対する主な変更点】
昇順・降順表示選択追加、その他インターフェイス変更

【仕様まとめ】
ナンバリングされた画像を順番に自動表示(昇順・降順選択)
表示サイズ100%(拡大・縮小なし)
一時停止・コマ送り・逆再生
マウス一定時間停止で、操作パネル非表示(画像のみ表示)
キーボードで一時停止・再生機能追加・コマ送り(スペース,←,→)
画像の表示停止時間任意設定
画像URLディレクトリ任意設定
背景色任意設定(デフォルト白)
画像拡張子一種類のみ選択可能(デフォルト「.jpg」)

【必須環境】
javascript,cssが有効なブラウザ

【推奨ブラウザ】
firefox,safari,opera各最新版

【設置方法概要】
ダウンロードしたファイルの「img」フォルダに「001」から連番に名前を付けた 画像を格納し、sample.htmlファイルに表示枚数を記述。

【sample.html内コード設定例】
画像枚数が12枚の場合
var cntTotal = 12;

1枚目を「01.jpg(頭に0を付加)」とした場合
var keta = "01";

画像ファイルの拡張子が「.png」の場合
var extension = ".png";

画像格納ディレクトリがsample.htmlと同じ階層で「img/001.jpg〜???.jpg」の場合
var folderUrl = "img/";

画像格納ディレクトリURLが「http://sample.com/pic/001.jpg〜???.jpg」の場合
var folderUrl = "http://sample.com/pic/";

画像表示時間を6.5秒に設定したい場合
var stopTimeSec = 6.5;

画像表示開始を降順(Noの大きい画像を1ページ目)に設定したい場合
var startPage = "big";

画像表示開始を昇順(001.jpgを1ページ目)に設定したい場合
var startPage = "";

背景色を黒色にしたい場合
var haikeiColor = "#000000";

【注意点】
画像ファイル名は「001」から連番となるように設定して下さい。「0」番や欠番は表示されません。
画像ファイルの拡張子は1つに統一して下さい。
1枚あたりの読み込み画像ファイルサイズが大きい場合は、表示時間を長めに設定願います。
使用は自己責任でお願いします。


画像をNo.ではなく画像URLを個別に指定したい場合はスライドショーサンプル5参照のこと。

last update 2010.12.17
参考・出典等
「特に無し」

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2010 Riptac. All Rights Reserved.