・　このページの説明

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

　既存のHTMLファイルに貼り付けて使う、レスポンシブデザイン対応でシンプルなJavascriptスライドショーの基本構造を解説しています。「アニメーション無し型」と「透かしアニメーション型」と「全スクロールアニメーション型」の3種類です。 他のアニメーションや別のタイプのスライドショーやギャラリーは IMGスライドショー 、または ホームページテンプレート をご覧ください。

　掲載されているソースコードを目的のホームページのHTMLファイルのHEAD内とBODY内に貼り付け、データ部分を自分の画像に書き換えて使用してください。 このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。有料版はありません。

⇔

<!---ここからmy_sl10のスタイルシート。↓---> <style type="text/css"> /** スライドショーの全体。レスポンシブ対応でwidth:100%;max-width:～px;に画像の最大表示サイズを書く。 **/ #my_sl10{ position:relative; top:0px; left:0px; width:100%; max-width:640px; margin:auto; } /** スライドショーの画像部分。アスペクト比維持のため、padding-top:～%;に画像部分の（高さ／幅）を％で書く。 **/ #my_sl10 .base{ position:relative; top:0px; left:0px; padding-top:75%; } /** スライドショーの個々の画像。 **/ #my_sl10 .base img{ position:absolute; top:0px; left:0px; z-index:1; width:100%; } </style> <!-- ここまでスタイルシート。↑ --> <!---ここからmy_sl11のスタイルシート。↓---> <style type="text/css"> /** スライドショーの全体。レスポンシブ対応でwidth:100%;max-width:～px;に画像の最大表示サイズを書く。 **/ #my_sl11{ position:relative; top:0px; left:0px; width:100%; max-width:768px; margin:auto; } /** スライドショーの画像部分。アスペクト比維持のため、padding-top:～%;に画像部分の（高さ／幅）を％で書く。 **/ #my_sl11 .base{ position:relative; top:0px; left:0px; padding-top:56.25%; } /** スライドショーの個々の画像。transition-duration:1s;はアニメーション速度。 **/ #my_sl11 .base img{ position:absolute; top:0px; left:0px; z-index:1; width:100%; opacity:0; transition-property:opacity; transition-duration:1s; } </style> <!-- ここまでスタイルシート。↑ --> <!---ここからmy_sl12のスタイルシート。↓---> <style type="text/css"> /** スライドショーの全体。レスポンシブ対応でwidth:100%;max-width:～px;に画像の最大表示サイズを書く。 **/ #my_sl12{ position:relative; top:0px; left:0px; width:100%; max-width:640px; margin:auto; overflow:hidden; } /** スライドショーの画像部分。transition-duration:1s;はアニメーション速度。 **/ #my_sl12 .base{ position:relative; top:0px; left:0px; white-space:nowrap; transition-property:left; transition-duration:1s; } /** スライドショーの個々の画像。 **/ #my_sl12 .base img{ position:relative; top:0px; left:0px; width:100%; } </style> <!-- ここまでスタイルシート。↑ --> <!-- ここからアニメーション無しスライドショーmy_sl10。↓ --> <div id="my_sl10"> <!-- ここから画像部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <img src="../img/3.jpg" title="ハス" /> <img src="../img/5.jpg" title="ひまわり" /> <img src="../img/6.jpg" title="ルドベキア" /> <img src="../img/9.jpg" title="ビヨウヤナギ" /> <img src="../img/10.jpg" title="紫カタバミ" /> <img src="../img/11.jpg" title="アガパンサス" /> <img src="../img/1.jpg" title="アルストロメリア" /> <img src="../img/18.jpg" title="ツバキ" /> <img src="../img/17.jpg" title="サザンカ" /> <!-- ここまでデータ。↑ --> </div> <!-- ここまで画像部分。↑ --> </div> <!-- ここまでアニメーション無しスライドショーmy_sl1。↑ --> <!-- ここからアニメーション無し用スクリプト。↓ --> <script type="text/javascript"> "use strict"; //--strict（厳格）モードで実行。 !function(o) { //--スライドショー要素oを引数にした無名関数。 const sokudo = 5000, //--スライドショー速度（ミリ秒単位）。 syasin = o.querySelectorAll("img"), //--本体内のIMG要素のリスト。 goukei = syasin.length, //--画像の枚数合計。 tugi = function(){ //--次の画像を表示する関数。 stack = idx; //--現在のインデックスをスタックに入れる。 idx ++; //--インデックスを一つ進める。 idx %= goukei; //--インデックスが合計を上回らないための処理。 syasin[idx].style.zIndex = 2; //--新しい画像を前面に。 syasin[stack].style.zIndex = 1; //--古い画像を後面に。 }; let idx = 0, //--インデックスを宣言し初期値0を代入。 stack; //--スタックを宣言。 syasin[idx].style.zIndex = 2; //--最初の画像を前面に。 setInterval(tugi,sokudo); //--変数sokudoごとに関数tugiを呼び出す。 }(document.getElementById("my_sl10")); //--id="my_sl10"の要素を引数にする。 //-- All Rights Reserved. (C) Miyake_kobo. -- </script> <!-- ここまでアニメーション無し用スクリプト。↑ -->

・　アニメーション無しスライドショー id="my_sl10"

・　アニメーション無しスライドショーのHEAD内のソース

　HEAD内に以下をコピーしてください。

・　アニメーション無しスライドショーのBODY内のソース

　スライドショーを貼り付ける場所に以下をコピーしてください。

<!-- ここから透かしスライドショーmy_sl11。↓ --> <div id="my_sl11"> <!-- ここから画像部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <img src="../img78/0.jpg" title="違和感がある風景 No.0" /> <img src="../img78/1.jpg" title="違和感がある風景 No.1" /> <img src="../img78/2.jpg" title="違和感がある風景 No.2" /> <img src="../img78/3.jpg" title="違和感がある風景 No.3" /> <img src="../img78/4.jpg" title="違和感がある風景 No.4" /> <img src="../img78/5.jpg" title="違和感がある風景 No.5" /> <img src="../img78/6.jpg" title="違和感がある風景 No.6" /> <img src="../img78/7.jpg" title="違和感がある風景 No.7" /> <img src="../img78/8.jpg" title="違和感がある風景 No.8" /> <img src="../img78/9.jpg" title="違和感がある風景 No.9" /> <img src="../img78/10.jpg" title="違和感がある風景 No.10" /> <img src="../img78/11.jpg" title="違和感がある風景 No.11" /> <img src="../img78/12.jpg" title="違和感がある風景 No.12" /> <img src="../img78/13.jpg" title="違和感がある風景 No.13" /> <img src="../img78/14.jpg" title="違和感がある風景 No.14" /> <img src="../img78/15.jpg" title="違和感がある風景 No.15" /> <img src="../img78/16.jpg" title="違和感がある風景 No.16" /> <img src="../img78/17.jpg" title="違和感がある風景 No.17" /> <img src="../img78/18.jpg" title="違和感がある風景 No.18" /> <img src="../img78/19.jpg" title="違和感がある風景 No.19" /> <!-- ここまでデータ。↑ --> </div> <!-- ここまで画像部分。↑ --> </div> <!-- ここまで透かしスライドショーmy_sl11。↑ --> <!-- ここから透かし用スクリプト。↓ --> <script type="text/javascript"> "use strict"; //--strict（厳格）モード」で実行。 !function(o) { //--スライドショー要素oを引数にした無名関数。 const sokudo = 5300, //--スライドショー速度（ミリ秒単位）。 syasin = o.querySelectorAll("img"), //--本体内のIMG要素のリスト。 goukei = syasin.length, //--画像の枚数合計。 tugi = function(){ //--次の画像を表示する関数。 stack = idx; //--現在のインデックスをスタックに入れる。 idx ++; //--インデックスを一つ進める。 idx %= goukei; //--インデックスが合計を上回らないための処理。 syasin[idx].style.zIndex = 2; //--新しい画像を前面に。 syasin[stack].style.zIndex = 1; //--古い画像を後面に。 syasin[idx].style.opacity = 1; //--新しい画像を不透明に。 syasin[stack].style.opacity = 0; //--古い画像を透明に。 }; let idx = 0, //--インデックスを宣言し初期値0を代入。 stack; //--スタックを宣言。 syasin[idx].style.zIndex = 2; //--最初の画像を前面に。 syasin[idx].style.opacity = 1; //--最初の画像を不透明に。 setInterval(tugi,sokudo); //--変数sokudoごとに関数tugiを呼び出す。 }(document.getElementById("my_sl11")); //--id="my_sl11"の要素を引数にする。 //-- All Rights Reserved. (C) Miyake_kobo. -- </script> <!-- ここまで透かし用スクリプト。↑ -->

・　透かしスライドショー id="my_sl11"

　使用している画像は生成AIのCopilotで作ったものです。

・　透かしスライドショーのHEAD内のソース

　HEAD内に以下をコピーしてください。

・　透かしスライドショーのBODY内のソース

　スライドショーを貼り付ける場所に以下をコピーしてください。

<!-- ここから全スクロールスライドショーmy_sl12。↓ --> <div id="my_sl12"> <!-- ここから画像部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <img src="../img73/0.jpg" title="違和感がある風景 No.0" /> <img src="../img73/1.jpg" title="違和感がある風景 No.1" /> <img src="../img73/2.jpg" title="違和感がある風景 No.2" /> <img src="../img73/3.jpg" title="違和感がある風景 No.3" /> <img src="../img73/4.jpg" title="違和感がある風景 No.4" /> <img src="../img73/5.jpg" title="違和感がある風景 No.5" /> <img src="../img73/6.jpg" title="違和感がある風景 No.6" /> <img src="../img73/7.jpg" title="違和感がある風景 No.7" /> <img src="../img73/8.jpg" title="違和感がある風景 No.8" /> <img src="../img73/9.jpg" title="違和感がある風景 No.9" /> <img src="../img73/10.jpg" title="違和感がある風景 No.10" /> <img src="../img73/11.jpg" title="違和感がある風景 No.11" /> <img src="../img73/12.jpg" title="違和感がある風景 No.12" /> <img src="../img73/13.jpg" title="違和感がある風景 No.13" /> <img src="../img73/14.jpg" title="違和感がある風景 No.14" /> <!-- ここまでデータ。↑ --> </div> <!-- ここまで画像部分。↑ --> </div> <!-- ここまで全スクロールスライドショーmy_sl11。↑ --> <!-- ここから全スクロール用スクリプト。↓ --> <script type="text/javascript"> "use strict"; //--strict（厳格）モード」で実行。 !function(o) { //--スライドショー要素oを引数にした無名関数。 const sokudo = 5600, //--スライドショー速度（ミリ秒単位）。 syasin = o.querySelectorAll("img"), //--本体内のIMG要素のリスト。 base = o.querySelector(".base"), //--画像部分。画像を入れたクラス名baseのdiv要素。 goukei = syasin.length, //--画像の枚数合計。 tugi = function(){ //--次の画像を表示する関数。 stack = idx; //--現在のインデックスをスタックに入れる。 idx ++; //--インデックスを一つ進める。 idx %= goukei; //--インデックスが合計を上回らないための処理。 base.style.left = -syasin[idx].offsetLeft / o.offsetWidth * 100 + "%"; //--画像の相対left位置（%単位）だけbaseを左に移動する。 }; let idx = 0, //--インデックスを宣言し初期値0を代入。 stack; //--スタックを宣言。 setInterval(tugi,sokudo); //--変数sokudoごとに関数tugiを呼び出す。 }(document.getElementById("my_sl12")); //--id="my_sl12"の要素を引数にする。 //-- All Rights Reserved. (C) Miyake_kobo. -- </script> <!-- ここまで全スクロール用スクリプト。↑ -->

・　全スクロールスライドショー id="my_sl12"

　使用している画像は生成AIのCopilotで作ったものです。

・　全スクロールスライドショーのHEAD内のソース

　HEAD内に以下をコピーしてください。

・　全スクロールスライドショーのBODY内のソース

　スライドショーを貼り付ける場所に以下をコピーしてください。

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