みやけ工房のJavaScriptスライドショーWebページ

スライドショーページ

・　INDEX

メインコンテンツ
他のスライドショー関連サイト
スライドショーアニメーションの見本
コンテンツの題名のブラケット（角括弧[]）について

・　メインコンテンツ

　掲載しているコンテンツはスライドショーだけを表示する独立したページの見本とソースです。他のページに貼り付けるタイプではありません。一つのスライドショーに対して複数のリンクがありますが、JavaScriptプログラムは同じものを使用しています。切り替えアニメーションはスライドショーごとに任意の種類と数の組合せを採用していますが、それぞれの解説ページ最下部「別のアニメーションの組み合わせを作る」で、当サイトが提供している種類のアニメーションの中から自由な種類を自由な個数で組み合わせて、新たなスライドショーの見本とソースコードを作る事ができます。

[オープン][レスポンシブ][アクティブ][シャッフル][実行時ランダム][4画像][多種類][DrFlMw縦横連動][セレクト][部品削除可]スライドショー

[オープン][レスポンシブ][アクティブ][シャッフル][ガイド][実行時ランダム][4画像][多種類][DrFlMw縦横連動][divサムネイル][セレクト][部品削除可]スライドショーギャラリー

[オープン][レスポンシブ][アクティブ][シャッフル][実行時ランダム][4画像][多種類][DrFlMw縦横連動][ガイド][セレクト][部品削除可][サムネイル連動]スライドショーギャラリー

[オープン][レスポンシブ][アクティブ][シャッフル][実行時ランダム][4画像][多種類][DrFlMw縦横連動][ガイド][セレクト][部品削除可][カルーセル連動]スライドショーギャラリー

[オープン][連番][レスポンシブ][アクティブ][シャッフル][実行時ランダム][4画像][多種類][DrFlMw縦横連動][ガイド][セレクト][部品削除可][カルーセル連動]スライドショーギャラリー

・　他のスライドショー関連サイト: みやけ工房のIMGスライドショー
　他のページに貼り付けて使用するスライドショーで、画像（img要素など）専用型です。大部分のコンテンツの解説ページはアニメーション（またはアニメーションの組合せ）を変更できる仕様になっています。即ち、最初に表示されるアニメーション以外のアニメーションを使ったスライドショーの見本やソースコードも見る事ができます。; みやけ工房のBLOCKスライドショー
　他のページに貼り付けるタイプのBLOCKコンテンツ（文章やリンクや画像などを入れた四角い領域）専用のスライドショーで、BLOCKの内部をHTMLで自由にデザインできます。大部分のコンテンツの解説ページはアニメーション（またはアニメーションの組合せ）を変更できる仕様になっています。即ち、最初に表示されるアニメーション以外のアニメーションを使ったスライドショーの見本やソースコードも見る事ができます。; みやけ工房のホームページテンプレート
　上記「貼り付ける～スライドショー」を使用したスライドショー、ギャラリー、拡大ビューアがあるページのテンプレート集です。ページ全体のテンプレートで、他のページに貼り付けるタイプではありません。; みやけ工房のWeb用JavaScriptスライドショー目録
　みやけ工房サイトの目録です。

・　スライドショーアニメーションの見本: ●　当サイトのスライドショーで使用しているアニメーションを体験して頂く為の見本スライドショーです。この見本スライドショーで扱えるアニメーションはNo.1からNo.タイプで、このページを開く度にDrFlMw縦横連動型の中からランダムに決定したアニメーションで動いています。; ●　サムネイルの上部の「prev」「next」ボタンのクリックで前のNo次のNoのアニメーションに変わり、「Jump」ボタンでランダムなNoにジャンプできます。ボタンの右に現在のNoとアニメーション名が表示されています。その右に、スライドショー切替えの度にアニメーションも切替える事ができるセレクトボックスがあります。最初は「切替えない」で、「No順通り」「ランダム」に変更できます。その右のセレクトボックスではスライドショー速度とアニメーション速度の変更ができます。また、サムネイルの下のタイプ別セレクトボックスでアニメーションを指定する事もできます。; ●　なお、タイプ名でDrFlMw縦横連動型とはドラッグ・フリック・マウスホイールで操作した方向にスライドショーも動くタイプです。「前」と「次」ボタン操作では「前の画像が左⇒右」と「次の画像が右⇒左」に動き、マウスホイール操作では回転方向に動きます。ただし、DrFlMw縦横連動型もランダム型も通常型も（シャトル型以外は）自動スライドショー時はランダムな方向に動きます。; ●　見本は、[F][連番][レスポンシブ][アクティブ][シャッフル][divサムネイル][DrFlMw縦横連動][ガイド][実行時ランダム][4画像][多種類][セレクト][サムネイル連動]スライドショーギャラリーです。このページでは、実際の地球の写真を加工したものや生成AIのGeminiで作った地球の画像と私が撮影した写真を合成したものを使っています。

アニメーションの名前を表示

・　コンテンツの題名のブラケット（角括弧[]）について: [オープン]
　全ソースコードを公開していて、解説ページに掲載してあるソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。合法なサイトであれば、個人・商用を問わず無料で自由に永久に使用できます。登録や連絡などは不要です。; [レスポンシブ]
　レスポンシブデザインのホームページに二種類の型で対応しています。一つは「アスペクト比維持型」で、画面の小さいデバイスでもアスペクト比（縦横比）を維持します。写真や画像など形状を維持する必要があるスライドショーに使います。もう一つは「高さ維持型」で、画面の小さいデバイスではスライドショーの幅のみが小さくなり高さは維持されます。文章や画像などをまとめて表示するBLOCK型で、内容がはみ出さない様に高さを大きいままに維持して面積を確保します。; [アクティブ]
　スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; [シャッフル]
　記述したスライドショーデータを、ページを開いた時点でシャッフルする事ができます。即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。; [実行時ランダム]
　「カスタマイズ」でスライドショー実行時のアニメーションの動作方向を「ランダム」に設定できます。当サイトでは、（ランダム型アニメーションのスライドショー以外は）通常型スライドショーの実行時のアニメーションの動作方向は右→左または下→上に、シャトル型は右→左と左→右・下→上と上→下の繰り返し、にしてあります。即ち、次ボタンを押した時と同じ動作です。それを（ランダム型アニメーション以外でも）動作方向をランダムにできます。使用するアニメーションによって使い分けてください。; [4画像]
　通常のアニメーションは二枚の画像（またはBLOCK）を動かす事で作っています。現在見えている画像と次の画像の二枚です。 [4画像]型ではこれを四枚の画像を動かしてアニメーションを表現しています。; [多種類]
　複数のアニメーションを用意して、スライドショーで画像（またはBLOCK）が切り替えるたびにアニメーションがランダムに選択され実行されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、解説ページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示した解説ページを見る事ができます。 [多種類]型以外でも解説ページ最下部に「別のアニメーションを見る」が用意してあり、スライドショーの機能は今のままで別のアニメーションに変更した解説ページを見る事ができます。; [DrFlMw縦横連動]
　縦横連動型のアニメーションでは、ドラッグ（パソコン）やフリック（スマホやタブレット）でも操作でき、縦横それぞれの操作でアニメーション方向も連動します。即ちアニメーションは、モバイルでは縦フリックと横フリック操作でフリックした方向に動作し、パソコンでは縦ドラッグと横ドラッグでドラッグした方向に動作します。マウスが使える環境ではマウスホイールでも操作でき、アニメーションは縦方向に動作します。ドラッグ・フリック・マウスホイール操作は「カスタマイズ」で機能の有無を選択できます。; [ガイド]
　ガイドボタンで操作する事もできるスライドショーです。通常ガイドボタンは丸型で数字が書いてあり、クリックすると数字番目の画像（またはBLOCK）が表示されます。; [divサムネイル]
　サムネイルをimg要素ではなくdiv要素の背景として表示するタイプです。使用する画像のアスペクト比がバラバラな時などに利用できます。; [サムネイル連動]
　サムネイル一覧（ギャラリー）がスライドショーの動作に連動して横にスクロールするタイプです。イメージとしては、平らな板の上にサムネイルが横一列に並んでいて最初と最後があり、それがスライドショーに連動して左右にスクロールします。表示中の画像（またはBLOCK）のサムネイルが可能な限りサムネイル一覧の中央にスクロール移動します。サムネイル一覧は、モバイルではスワイプで、パソコンではスクロールバーで動かせるため、目的の画像を素早く探す事ができます。; [カルーセル連動]
　サムネイル一覧（ギャラリー）がカルーセル型になっていて、スライドショーの動作に連動して横に永久スクロールするタイプです。イメージとしては、サムネイル一覧の最初と最後が連結して輪を作り、それがスライドショーに連動して回転します。表示中の画像（またはBLOCK）のサムネイルが常にサムネイル一覧の中央にスクロール移動します。; [S]
　img要素を使ったスライドショーで、アスペクト比が同じ画像を使用するタイプです。 [レスポンシブ]はアスペクト比維持型のみです。高さ維持型では画像が歪んでしまいます。; [F]
　画像のアスペクト比に制限がないタイプです。 img要素ではなくBLOCK要素（divなど）を使ったスライドショーで、画像はBLOCK要素の背景画像として表示します。背景画像のスタイルシートbackground-sizeをcontainに設定して; [Fof]
　画像のアスペクト比に制限がないタイプです。スタイルシートobject-fitをcontainに設定したimg要素専用のタイプです。ただし、このままではバナーとしては使えません。; [大小]
　[F]型や[S]型のスライドショーギャラリーなどで、スライドショー用の大画像とサムネイル用の小画像を別々に記述して使用するタイプです。ただし、特に強調する必要が無い場合は省略しています。また、大画像をサムネイル用として記述して使用する事も可能です。; [大]
　[F]型や[S]型のスライドショーギャラリーなどで、スライドショー用の大画像をサムネイル用としても流用するタイプです。ただし、[連番]型は全てがこのタイプなので省略しています。; [連番]
　ファイル名が連番の数字になっている画像を使うスライドショーです。連番のファイル名とは、0.jpg・1.jpg・2.jpg や 12.jpg・13.jpg・14.jpg などの、連続する正の整数値として成り立つ数字をファイル名にした画像群です。例えばファイル名が 700.jpg の画像は使えますが 007.jpg は使えません。もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。; [不連番]
　0.jpgから99.jpgまでの間の不連続番号の写真を使用できるスライドショーです。連番の様に数字が連続している必要はありません。; [BLOCK]
　img要素の画像ではなく、画像や文章やリンクなどをひとまとめにしたBLOCK要素をスライドさせる事ができるスライドショーです。BLOCK要素の中身は、あたかも小さなホームページを作る様にHTMLで記述してください。 [BLOCK]型で画像だけを表示する時はBLOCK要素の背景画像にその画像を設定し、BLOCK要素の中身を空にしてください。; [マルチ]
　img要素もBLOCK要素を混ぜて使えるスライドショーです。 img要素を使う場合は[レスポンシブ]はアスペクト比維持型のみです。; [複]
　一つのページに複数個を配置できるスライドショーです。; [バナー]
　画像だけではなくバナー（画像をクリックすると設定したページなどが開く）も扱えるスライドショーです。 [バナー]は表記していない場合もありますが、解説かソースのHTML部分には記述してあります。; [セレクト]
　ページを開いた後にスライドショー速度やアニメーション速度や表示方法などを視聴者が変更できるスライドショーです。 [セレクト]は表記していない場合もありますが、解説かソースのHTML部分には記述してあります。; [viewボタン]
　クリックすると現在表示されている画像だけを別のタブに表示します。 div要素やa要素の背景画像を使っているデータでも画像のみを表示できます。逆に画像を直接ダウンロードされたくない時はボタンを削除してください。 [viewボタン]は右クリックから「新しいタブで画像を開く」機能を利用できないタイプすべてに設置する予定のため、現在は題名に表記していないコンテンツが多くあります。; [表示方法変更ボタン]
　トグルボタンでクリックする度にcoverとcontainが入れ替わります。 coverは画像を表示域全体に表示してアスペクト比が合わない部分は切り取られます。 containは画像のアスペクト比を維持したまま表示域に収まる様に表示されます。 [表示方法変更ボタン]は将来すべての[F]型スライドショーに設置する予定のため、現在は重要な意味が無い限り題名には表記していません。; [部品削除可]
　各種操作ボタン・ガイド・サムネイル一覧などのスライドショー部品が不要な時は、HTMLの該当箇所を削除すれば、その部品が無いスライドショーとして動作します。 [部品削除可]は表記していない場合もありますが、解説かソースのHTML部分には記述してあります。; [asif]
　Windowいっぱいに表示するスライドショーで、IFRAME用としても使用できます。画像を表示する場合、個々のデータのスタイルbackground-size:をcontainにすれば常にWindowに収まるサイズで表示され、coverにすればWindowいっぱいに表示されて、はみ出す部分はトリミングされます。 [asif]は表記していない場合もありますが、解説には記述してあります。; [asifof]
　[asif]と同様にWindowいっぱいに表示するスライドショーですが、メイン画像は縮小表示しています。その為アニメーション動作時に画像の一部が表示枠から溢れ出ます。当サイトのアニメーションはoverflow:hidden;で動作する様に作ってありますので、スクロール型など一部のアニメーションは[asifof]のスライドショーでは不自然に感じられます。「別のアニメーションの組み合わせを作る」時に注意してください。