・　このページの説明

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

　既存のHTMLファイルに貼り付けて使う、レスポンシブデザイン対応でシンプルなJavascriptスライドショーの基本構造を解説しています。「アニメーション無し型」と「透かしアニメーション型」と「全スクロールアニメーション型」の3種類です。

　掲載されているソースコードを目的のホームページのHTMLファイルのHEAD内とBODY内に貼り付け、データ部分を自分の写真に書き換えて使用してください。 なお、スライドショーだけの独立したページを作る場合は、 Javascriptスライドショーの基本構造 をご覧ください。

　このスライドショーは掲載しているソースコードのみで動きます。 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:1024px; margin:auto; } /** スライドショーの写真部分。アスペクト比維持のため、padding-top:～%;に写真部分の（高さ／幅）を％で書く。 **/ #my_sl11 .base{ position:relative; top:0px; left:0px; padding-top:100%; } /** スライドショーの個々の写真。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:800px; 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; } /** スライドショーの個々の写真。transition-duration:1s;はアニメーション速度。 **/ #my_sl12 .base img{ position:relative; top:0px; left:0px; width:100%; } #my_sl12 .base a{ text-decoration:none; } </style> <!-- ここまでスタイルシート。↑ --> <!-- ここからアニメーション無しスライドショーmy_sl10。↓ --> <div id="my_sl10"> <!-- ここから写真部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <img src="http://miyake.g2.xrea.com/img/3.jpg" title="ハス" /> <img src="http://miyake.g2.xrea.com/img/5.jpg" title="ひまわり" /> <img src="http://miyake.g2.xrea.com/img/6.jpg" title="ルドベキア" /> <img src="http://miyake.g2.xrea.com/img/9.jpg" title="ビヨウヤナギ" /> <img src="http://miyake.g2.xrea.com/img/10.jpg" title="紫カタバミ" /> <img src="http://miyake.g2.xrea.com/img/11.jpg" title="アガパンサス" /> <img src="http://miyake.g2.xrea.com/img/1.jpg" title="アルストロメリア" /> <img src="http://miyake.g2.xrea.com/img/18.jpg" title="ツバキ" /> <img src="http://miyake.g2.xrea.com/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="http://miyake.g2.xrea.com/img40/3.jpg" title="紅葉とスイレン" /> <img src="http://miyake.g2.xrea.com/img40/5.jpg" title="雪山と紅葉と桜" /> <img src="http://miyake.g2.xrea.com/img40/6.jpg" title="雪山の桜" /> <img src="http://miyake.g2.xrea.com/img40/9.jpg" title="雪山と桜" /> <img src="http://miyake.g2.xrea.com/img40/10.jpg" title="ハスと桜" /> <img src="http://miyake.g2.xrea.com/img40/1.jpg" title="紅葉と桜" /> <img src="http://miyake.g2.xrea.com/img40/15.jpg" title="紅葉とスイレン" /> <img src="http://miyake.g2.xrea.com/img40/16.jpg" title="雪山と菊と桜" /> <!-- ここまでデータ。↑ --> </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が作ったものです。植物の組み合わせに季節的な違和感がある画像を作らせてみました。

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

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

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

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

<!-- ここから全スクロールスライドショーmy_sl12。↓ --> <div id="my_sl12"> <!-- ここから写真部分。↓ --> <div class="base"> <!-- ここからデータ。↓ --> <!-- title属性にオンマウスで表示されるツールチップ。不要ならば削除。 --> <img src="http://miyake.g2.xrea.com/img40/17.jpg" title="雪山と菊と桜" /> <img src="http://miyake.g2.xrea.com/img40/11.jpg" title="雪山の桜" /> <img src="http://miyake.g2.xrea.com/img40/2.jpg" title="紅葉と桜" /> <img src="http://miyake.g2.xrea.com/img40/4.jpg" title="ハスと桜" /> <img src="http://miyake.g2.xrea.com/img40/7.jpg" title="ハスと桜" /> <img src="http://miyake.g2.xrea.com/img40/8.jpg" title="雪山と紅葉と桜" /> <img src="http://miyake.g2.xrea.com/img40/12.jpg" title="紅葉とスイレン" /> <img src="http://miyake.g2.xrea.com/img40/13.jpg" title="紅葉とスイレン" /> <img src="http://miyake.g2.xrea.com/img40/14.jpg" title="雪山の桜" /> <!-- ここまでデータ。↑ --> </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"

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

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

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

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

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