・　サンプルの説明

　ホームページに貼り付けて使用するシンプルなデザインのマルチスライドショーです。 マルチスライドショーは、img要素の写真や写真をa要素で囲んだバナーなどを切り替えるIMGスライドショーとしても、div要素などのBLOCK要素を切り替えるBLOCKスライドショーとしても使用できます。 アニメーションは、「落下」「全スクロール」「横ランダム転がり」「縦ランダム転がり」「ランダムワイプ」「透かし」「ランダムズーム」の7種類です。

　IMGスライドショーのレスポンシブデザインへの対応は、小さいデバイスで表示してもアスペクト比を維持して縮小します。 BLOCKスライドショーのレスポンシブデザインへの対応は、小さいデバイスで表示しても高さを維持して縮小し、中身の文章などのはみ出しを防ぎます。

　HEAD内のソース（全アニメーション共通）を、スライドショーを貼り付けるページソースのHEAD内にコピーしてください。 次に、見本スライドショーの下に記載してあるソースを、スライドショーを貼り付けるページソースの貼り付ける場所にコピーし、ご自身の画像データに書き換えてください。 このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。 アニメーションごとにIMGスライドショーとBLOCKスライドショーのソースを記載しています。

　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できますが、スクリプト内の著作権表記を消す事を禁止します。

　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

⇔

⇔

・　HEAD内のソース（全アニメーション共通）

　スライドショーを貼り付けるページのHEAD内にコピーしてください。

・　落下スライドショー

IMGスライドショー




BLOCKスライドショー

・　全スクロールスライドショー

IMGスライドショー




BLOCKスライドショー

・　横ランダム転がりスライドショー

IMGスライドショー




BLOCKスライドショー

・　縦ランダム転がりスライドショー

IMGスライドショー




BLOCKスライドショー

・　ランダムワイプスライドショー

IMGスライドショー




BLOCKスライドショー

・　透かしスライドショー

IMGスライドショー




BLOCKスライドショー

・　ランダムズームスライドショー

IMGスライドショー




BLOCKスライドショー



All Rights Reserved. Copyright (C) 2002- Miyake_kobo.