HTML5用のスライドショー（２）

HTML5用のスライドショー（２）

動きを繰り返して見たい場合は、ブラウザの「再読込」をクリックして下さい。


説明

HTML5で作成されたシンプルなスライドショー素材です。５枚の画像を順番に切り替えて表示させています。切り替わりの速度は３秒で設定されています。最初の写真と同時に下部から文字が表示されて、最後の写真に到達すると終了します。繰り返しはありません。

サイズ

幅　460px
高さ　345px

ダウンロード

ダウンロードはこちらから。

このファイルはZIPで圧縮されています。解凍してからお使い下さい。解凍すると、ファイル構成は以下のようになっています。

使い方

1. 2_Resourcesの中の画像は好きなものと入れ替えて下さい。写真の名前は1.jpg、2.jpg、3.jpg、4.jpg、5.jpg の必要があります。
2. 見本の画像サイズは600 × 450 pxです。この比率で、きれいに表示されます。サムネイル用の小さな画像を用意する必要はありません。
3. 文言を変更して下さい。「2_hype_generated_script.js」を開き、「ここにテキストを入力します。写真の説明文です。」「テキスト２」という文言（37行目あたり）を自分のサイトの文言に合うものに変更します。
4. 2_Resources を自分のアクセスできるサーバにアップして下さい。
5. サーバにアップが終わったら、スライドショーを表示したい部分に、以下のコードを貼りつけて下さい。

<div
  id="2_hype_container"
style="position:relative;overflow:hidden;width:460px;height:345px;">
<script
  type="text/javascript"
  src="[サーバのパス]2_Resources/2_hype_generated_script.js?44339">
</script>
</div>

注意事項

この HTML5 のプログラムはアップルのサファリに最適化されております。もちろん、iPhone や iPad でもきれいな動きで見ることができます。

ファイヤーフォックス、インターネット・エクスプローラー、オペラではうまく表示されない可能性もあります。ご了承下さい。


お願い

• このスライドショーは個人の方のみ無料です。
• このサイトのリンク（666days.com）がスライドショー右下に小さくありますが、これは削除しないようよろしくお願い致します。
• 商用サイトでお使いの方は有料（2,000円）になります。個人でやっている関係上、サポートはできませんので、採用頂く場合はよく検証頂いてからお願い致します。
• お支払い頂いた方は、右下リンクは削除されても構いません。
• 連絡は、こちらにお願い致します。（ノース）