説明 ◆スライドショー◆
◇見本・こんなスライド ◇リンクのターゲット指定について ◆簡単スライドショー + Fフェード版・メニュー ◆面白スライドショー・メニュー ◆フェードスライドショー・メニュー ◆スライス効果スライドショー・メニュー ◆横スライドショー特集・メニュー ◆縦スライドショー特集・メニュー ◆サムネイルスライドショー・メニュー
写真やイラストを並べて表示するんじゃなくて、パラパラ見られるようにする。
それがスライドショーのJavaScriptです。
jquery(ジェイ・クエリー)というJavaScriptを使ったスライドショーが流行ですが、ダウンロードだのプラグインだの……頭が痛くなる方、必見です。
jQuery無しでも、フェードイン・フェードアウトしながら画像を切り替えるスライドショーもあります。
とにかく、コピペでできるJavaScriptの動くスライドショーのサンプルです。
なお、ドキュメント宣言が<!DOCTYPE html>では動かないモノにはHTML5が付いてます。
■全面スライドや背景画像のスライドショーのJavaScriptは、『動く背景』のジャンルにあります。
■画像が左右に移動する「横スライドショー」のコーナー新設(2014/11/09)
■画像が上下に移動する「縦スライドショー」のコーナー新設(2014/12/22)
■「フェードのスライドショー」のコーナー新設(2015/08/05)
■「サムネイルのスライドショー」のコーナー新設(2015/08/05)
■簡単スライドショー + Fフェード版コーナーのグローバル変数を全件削除(2016/01/20)
■「スライス効果スライドショー」のコーナー新設(2017/09/03)
◇リンクのターゲット指定について
スライドショーには、画像にリンクが付いているモノがあります。
リンクのターゲット指定の初期値は「target="_top"」です。
この指定は、ブラウザによって動作が違います。
ブラウザFirefoxでは、画像クリックでリンク先に飛んで戻ってくるとスライドショーの画像はクリックした画像のままの状態です。
しかし他のブラウザではリンク先から戻ってくると、開始時の画像に戻ります。
「target="_new"」にすると、リンク先に飛んだ後もスライドショーは動作し続けているので、戻った時に表示されているスライド画像はそれぞれ違います。
しかし「マウスオン停止」を付けると、「target="_new"」なら、全ブラウザで画像クリックでリンク先に飛んで戻ってくるとスライドショーの画像はクリックした画像のままの状態になります。
リンクのターゲット指定は、本来はインラインフレーム(iframe)以外では、指定しないのが正しいそうです。
別リンクに飛んだ後、戻るも戻らないも訪問者の自由であって、サイト作成者が指定するものではないのです。
しかしリンク先が別サイトURLではなく、拡大画像であったり、同サイトの別コーナーだったりした場合は、リンク先から戻った時にスライド画像が開始時に戻っていると、イライラします。
そういうわけで、2016/01/23からのUP分、修正分は、ターゲット指定を選択制にしました。
お好みのターゲット指定を選択して下さい。
ブラウザによるリンクの動作の違いの説明は affiliate.ks-product から。
◆簡単スライドショー + Fフェード版・メニュー◆
まず最初は、私がいろいろなJavaScriptを合成して作った、とっても簡単なスライドショーの紹介。いろいろに改造合成して、自動、クリック、コメント付き等のバージョンがあります。
それに画像切替の方法が2種類あって、簡単なスライドショーと、フェード版(フェードイン・フェードアウトで、ふわっと切り替わるスライドショー)があります。
スライドのメニューをクリックすると簡単版へ、となりの F をクリックすると、そのフェード版のページになります。
このコーナーで利用しているフェードの原本は、イヌでもわかるJavaScript講座(2016/08/20現在新URL)です。↓
・新URL:http://cya.sakura.ne.jp/java/sshow2.htm ・旧URL:http://www.red.oit-net.jp/tatsuya/java/sshow2.htm
2016/01/20 に全件同じフェードに統一しました。
■この簡単バージョンのスライドショーは、Fフェード版も含めて、すべて丸型スライドショーに変更できます。
変更見本は面白2■丸いスライドショーとフェード2■丸いスライドショーから。
■簡単スライドショー・改造バージョン■◆Fはフェード版◆
全件グローバル変数を削除済み:2016/01/20
自動スライド 超簡単 | F | ページを開くとスライドしてる。小さな画像でスピードを速くすると、GIFアニメのようにも使えます。ランダムスライドショーへのリンク有り。 |
自動スライド、コメ付き | F | ページを開くとスライドしてて、コメントも付いてます。 |
自動、停止ボタン付き | F | ちゃんと始めからスライドを見てほしいので、開始用の自動ボタンをセット。 |
自動、停止、コメ付き | F | 画像の説明もしたい方のために、コメント欄もセット。 |
クリックでスライド | F | 1枚1枚、お客様のペースでじっくり見てほしいので、自動で動くのはダメな方へ。 |
クリックでコメ付き | F | 画像以外にコメントもじっくり読んでほしいので、コメント欄もセット。 |
自動でもクリックでも | F | 自動でもクリックでも動きます。 |
全部セット | F | ええい、自動でもクリックでもコメント付きで動けぇぇぇ!…という方のために。 |
■完成です■ | F | ■完成■ 実はサブタイトルも付けられるのです。そしてdivタグで囲んでみました。 |
★盛ります★ | F | いままでのモノは骨組みです。cssやtableタグを修正して、自分好みに盛り付けましょう! |
jqueryもどき | F | jqueryっぽくしてみました。…見えなかったらすみません。 |
◇見本・こんなスライド ◇リンクのターゲット指定について ◆簡単スライドショー + Fフェード版・メニュー ◆面白スライドショー・メニュー ◆フェードスライドショー・メニュー ◆スライス効果スライドショー・メニュー ◆横スライドショー特集・メニュー ◆縦スライドショー特集・メニュー ◆サムネイルスライドショー・メニュー
◆面白スライドショー・メニュー◆
それでは、スライドの表示の仕方がとても面白いスライドショーのご紹介です。とにかくコピペすれば、面白い動きが楽しめます。
■面白スライドショー■
画像クリックでスライド | 画像本体をクリックすることで、次々にスライドショーをします。 |
画像マウスオンでスライド | 画像本体をマウスオンすることで、次々にスライドショーをします。 |
丸いスライドショー | 簡単スライドショーの『自動スライド 超簡単』を、丸型のスライドショーに改造。CSSを少し記述するだけで、簡単の全バージョンが丸型に変更可能。2016/01/20:修正 |
CSS+JS 拡大縮小スライド | 画像が拡大と縮小を繰り返しながら、自動で切り替わるスライドショーです。CSSとJavaScriptの併用での作成。 |
CSS+JS 拡大縮小スライド米付 | 上記の拡大縮小スライドに、さらにコメントを付加しました。CSSとJavaScriptの併用での作成。 |
スライド複数設置・枚数違い | 簡単スライドショーを複数設置。画像枚数は自由に指定可能ですが、切替速度は全部同じです。 |
スライド複数・枚数速度違い | 簡単スライドショーを複数設置。画像枚数も切替速度も、個別に自由に指定可能。 |
スライド複数・オン停止 | 簡単スライドショーを複数設置。枚数も速度も個別指定可能で、画像マウスオンでスライド停止。 |
+CSS拡大縮小回転米LINK付 | 拡大縮小、さらに回転しながらスライドショー。コメント、リンク付き。原本リンク有り。 |
見開きページめくり | 左右見開き2Pのページめくりで画像リンク付き。画像マウスオンで停止。グーグルのブラウザChromeでは少し画像がチラつきます。 |
シャッフルするスライド | シャッフルとはトランプを切るような感じのスライド。リンク付き。画像マウスオンで停止。 |
消せる移動スライドショー | スライドショーの画像の入ったフレームを、マウスでドラッグして移動できます。開く、閉じるのボタン付き。2014/10/30→2015/03/15:フレームだけでなく、画像でもドラッグ可能へ。 |
1枚ページめくり | 1枚の画像の真ん中からめくれるページめくり。原本をHTML5対応にし、画像サイズによって動作しなくなる欠点を修正。 |
1枚ページめくり文字入り | 上記を改造。ぺーじめくりの領域に文字や画像が入れられます。 |
1枚ページめくりコメ付き | 上記を改造。コメント付きのページめくりです。 |
縦も横回転も複数設置 | 同じ基本ソースなので、1ページの中にいろいろな回転で、複数設置が可能です。table指定で設置しましたが、cssで設置しても。 |
付いてくるスライドショー | スクロールすると付いてくるスライドショーです。ふわふわした動きで付いてきます。原本リンク有り。 |
付くスライド・リンク有 | 上記を改造して、付いてくるスライド画像に個別にリンクを付けました。 |
連番+拡張子のスライド | 画像を連番で作成し、記述を簡単にした自動スライドショー。拡張子も選択できます。 |
連番+拡張子で画像クリック | 上記の画像連番、拡張子選択のスライドを画像クリックに変更。 |
連番+拡張子で画マウスオン | 上記の画像連番、拡張子選択のスライドを画像マウスオンに変更。 |
拡大スライドショー | 拡大しながらスライドショーをします。 |
拡大スライド コメ付 | 拡大しながらスライドショー。コメント付き |
拡大スライド コメ、リンク付 | 拡大しながらスライドショー。コメント付き、リンク付き。 |
縮小スライド コメ付 | 上記を縮小スライドショーに変更。ほぼ画面いっぱいの大きさから、画像サイズに縮小します。 |
ドラッグでページめくり | 本の端をマウスでドラッグすると、本物の本のようにページがめくれます。画像の大きさで3種類有り。 |
1枚ページめくり縦横コメ付 | 1枚のページめくりで、上下(縦)めくりか左右(横)めくりかをソースの中で選択可。画像クリックでめくり方向を、ボタンクリックで自動と手動を変更可。コメ付き。2016/08/04:修正。 |
2枚ページめくり左右コメ付 | 2枚のページめくりで、右→左めくりか左→右めくりかをソースの中で選択可能。ループの方法も3通りの選択可。コメント付き。硬いめくりの洋紙タイプと柔らかなめくりの和紙タイプが有り。 |
◇見本・こんなスライド ◇リンクのターゲット指定について ◆簡単スライドショー + Fフェード版・メニュー ◆面白スライドショー・メニュー ◆フェードスライドショー・メニュー ◆スライス効果スライドショー・メニュー ◆横スライドショー特集・メニュー ◆縦スライドショー特集・メニュー ◆サムネイルスライドショー・メニュー
◆フェードスライドショー特集・メニュー◆
フェードイン・フェードアウトで、ふわっと切り替わるスライドショーの紹介です。コーナー作成日 : 2015/8/5ただしフェード使用でも、横移動や縦移動やサムネイル形式のスライドショーは、その該当メニューの方にあります。
フェードの全面スライドや背景画像のスライドショーのJavaScriptは、『動く背景』のジャンルにあります。
■フェードスライドショー■
超簡単な綺麗なフェード | CSS3 と JavaScript の併用の綺麗なフェードイン、フェードアウトのスライドショー。前回は偶数枚必要でしたが、今回は奇数枚数でも可。簡単スライドショーの『自動スライド 超簡単フェード版』と同じ。2015/09/13:最終修正。 |
ランダムでフェード | 上記の CSS3 と JavaScript の併用の綺麗なフェードのスライドショーがランダムで切り替わります。2016/01/21:修正 |
丸いスライド・フェード版 | 簡単スライドショーの『自動スライド超簡単フェード版』を、丸型のスライドショーに改造。CSSを少し記述するだけで変更可能。。2016/01/20:修正。 |
フェードでマウスオン停止 | CSS3とJavaScriptの併用の綺麗なフェードイン、フェードアウトのスライドショー。画像マウスオンで停止します。 |
フェードでコメ付オン停止 | CSS3とJavaScriptの併用の、コメント付きの綺麗なフェードのスライドショー。画像マウスオンで停止します。 |
オン停止リンク全部 | CSSとJS併用。のフェードのスライドショーに、マウスオン停止とリンクを設定。リンクを付けなくても、マウスカーソルは全部手の形。2016/01/23:修正 |
オン停止リンク有り無し | 上記とは違うJavaScriptの、マウスオン停止とリンク設定。リンクの有り無しでマウスカーソルが変化。ただ、開始ページが最後の画像か空白になります。 |
フェードサイズ違い実寸表示 | サイズがバラバラに異なる画像が、綺麗なフェードイン、フェードアウトで、自動で切り替わるスライドショー。実寸表示 |
フェードサイズ違い実寸コメ | 上記のフェードイン、フェードアウト、実寸表示のコメント付き。 |
Fサイズ違い実寸コメ,リンク | 上記のフェードイン、フェードアウト、実寸表示のコメント、リンク付き。 |
フェードサイズ違縦横100% | サイズがバラバラに異なる画像が、綺麗なフェードイン、フェードアウトで、自動で切り替わるスライドショー。縦横100%表示。 |
フェードサイズ違上下カット | サイズがバラバラに異なる画像が、綺麗なフェードイン、フェードアウトで、自動で切り替わるスライドショー。縦横比率を正しく表示するため、画像の上下をカット。 |
4方向ランダム移動HTML記 | 上下左右の4方向にランダムに移動しながら、フェード切替の自動スライドショー。リンク付き。画像やリンク指定はHTMLの中で指定。2016/01/13:修正 |
8方向ランダム移動リンク無 | 上下左右斜めの8方向にランダムに移動しながら、フェード切替の自動スライドショー。リンク無し。2016/01/13:修正 |
8方向ランダム移動リンク有 | 上下左右斜めの8方向にランダムに移動しながら、フェード切替の自動スライドショー。リンク有り。2016/01/13:修正 |
8方向ランダム移動コメ付 | 上下左右斜めの8方向にランダムに移動しながら、フェード切替の自動スライドショー。コメント付き。2016/01/13:修正 |
8方ランダム動リンク・コメ付 | 上下左右斜めの8方向にランダムに移動しながら、フェード切替の自動スライドショー。リンクとコメント付き。2016/01/13:修正 |
フェードのみで比較 | ランダム移動分を削除して、フェード切替だけにした自動スライド。CSSを併用した別のスライドショーと並べて比較。2016/01/13:修正 |
大小二つのスライド コメ付 | 『動く背景』で紹介したスライド。全面フェードのスライドと、同じ画像の小さなスライドのセット。 |
CSSでフェード・スライド | CSSで、CSSのみで動作するフェードのスライドショーです。CSSだけのスライドショーは同ページでの複数設置が超簡単。でも画像の増減は少々面倒です。 |
CSS+JavaScript合体フェード | フェード部分だけCSSで作成して、スライドショー部分はJavaScriptで作成。どちらも一長一短あり。上記と同じ画像を使用しているので、見比べて下さい。 |
◇見本・こんなスライド ◇リンクのターゲット指定について ◆簡単スライドショー + Fフェード版・メニュー ◆面白スライドショー・メニュー ◆フェードスライドショー・メニュー ◆スライス効果スライドショー・メニュー ◆横スライドショー特集・メニュー ◆縦スライドショー特集・メニュー ◆サムネイルスライドショー・メニュー
◆スライス効果スライドショー特集・メニュー◆
画像がスライスされたように、次の画像に切り替わるスライドショーです。スライス効果のスライドショーの数が多くなったので、コーナーをこちらに作成しました。 コーナー作成日 : 2017/09/03
■スライス効果スライドショー■
全件グローバル変数を削除済み:2017/09/03
スライス効果コメ付リンク付-原本- | スライス効果付きのスライドショーの原本です。原本なので、グローバル変数は消してません。 |
縦スライス効果のみ | 原本と同じ方向の、縦スライスのみのスライドショーです。 |
横スライス効果のみ | 原本と違う方向の、横スライスのみのスライドショーです。 |
縦スライス効果のリンク付 | リンク付きの、縦スライスのスライドショーです。 |
横スライス効果のリンク付 | リンク付きの、横スライスのスライドショーです。 |
縦スライス効果のコメント付 | コメント付きの、縦スライスのスライドショーです。 |
横スライス効果のコメント付 | コメント付きの、横スライスのスライドショーです。 |
縦スライス効果のリンク付コメ付 | リンク付き、コメント付きの、縦スライスのスライドショーです。 |
横スライス効果のリンク付コメ付 | リンク付き、コメント付きの、横スライスのスライドショーです。 |
◇見本・こんなスライド ◇リンクのターゲット指定について ◆簡単スライドショー + Fフェード版・メニュー ◆面白スライドショー・メニュー ◆フェードスライドショー・メニュー ◆スライス効果スライドショー・メニュー ◆横スライドショー特集・メニュー ◆縦スライドショー特集・メニュー ◆サムネイルスライドショー・メニュー
◆横スライドショー特集・メニュー◆
画像が横へスライドしたり、コンベアベルト式に画像が横にスクロールするスライド、横回転スライドなど、左右に動くスライドショーの数が多くなったので、コーナーをこちらに作成しました。 コーナー作成日 : 2014/11/09■横スライドショー■
左→右重ね移動オン停リンク有 | このページで紹介しているスライド。左から右へ横滑りして動きます。マウスオン停止、リンク有り。2016/01/24:修正 |
左→右〃オン停リンクコメ付 | 上記スライドショーに、さらにコメント追加。コメント表示位置は画像外指定。2016/01/24:修正 |
右→左重ね移動オン停リンク有 | 上記のスライドを改造して逆向きの、右から左へのスライドへ。マウスオン停止、リンク有り。2016/01/24:修正 |
右→左〃オン停リンクコメ付 | 上記スライドショーに、さらにコメント追加。コメント表示位置は画像内部指定。2016/01/24:修正 |
横スクロール右→左 | 横スクロール式で、画像が右から左へ横に流れます。画像マウスオンで停止し、リンクも設定可。 |
横スクロール右→左サイズ違い | 上記と全く同じ |
横回転スライド | 縦回転スライドと基本ソースが共通です。まず左から右へ回転。右から左も可能。画像マウスオンで停止し、リンクも設定可 |
横スクロール左右選択 | 画像スクロールの左右の向きを、選択して変更できます。画像マウスオンで停止し、リンクも設定可。 |
横スクロール左右小休止 | 上記6と同じJavaScriptですが、スクロール速度が画像1枚ごとに小休止します。 |
横スクロール左右ボタン | 上記6と同じJavaScriptで、ボタンクリックで画像の流れる向きを変更できます。リンク可。 |
横スクロール左右矢印小休止 | 上記と基本のJavaScriptは同じ。ボタンではなく矢印クリックで画像の流れる向きを変更できます。リンク可。 |
横移動スライド・コメ付 | 横から次々に画像が移動してくる、コメント付きのスライドショー。リンク可能。自動と手動ができますが、ループしません。同サイズ画像限定。2014/12/19:ボタン操作を修正。 |
右から左へスライド | 右から左への自動スライドショー。画像1枚ごとに、少し停止を繰り返します。 |
右から左へスライド・コメ付 | 右から左への自動スライドショー。画像1枚ごとに、少し停止を繰り返します。画像の下側にコメント付き。 |
◇見本・こんなスライド ◇リンクのターゲット指定について ◆簡単スライドショー + Fフェード版・メニュー ◆面白スライドショー・メニュー ◆フェードスライドショー・メニュー ◆スライス効果スライドショー・メニュー ◆横スライドショー特集・メニュー ◆縦スライドショー特集・メニュー ◆サムネイルスライドショー・メニュー
◆縦スライドショー特集・メニュー◆
画像が縦へスライドしたり、縦にスクロールするスライド、縦回転スライドなど、上下に動くスライドショーの数が多くなったので、コーナーをこちらに作成しました。 コーナー作成日 : 2014/12/22■縦スライドショー■
上→下重ね移動オン停リンク有 | 上から下へドロップしてくるスライド。マウスオン停止、リンク有り。jsファイルを展開した原本へのリンク有り。2016/01/24:修正 |
上→下〃オン停リンクコメ付 | 上記スライドショーに、さらにコメント追加。コメント表示位置は画像外指定。2016/01/24:修正 |
下→上重ね移動オン停リンク有 | 上記を改造した、下から上へ移動するスライドショー。マウスオン停止、リンク有り。2016/01/24:修正 |
下→上〃オン停リンクコメ付 | 上記スライドショーに、さらにコメント追加。コメント表示位置は画像内部指定。2016/01/24:修正 |
下から上へスライド | 下から上への自動スライドショー。画像1枚ごとに、少し停止を繰り返します。2014/12/22:ソースを簡略化。 |
下から上へスライド・コメ付 | 上記の下から上への自動スライドショーを改造して、画像の下にコメントを付けました。 |
下から上スライド・右コメ付 | 上記の下から上への自動スライドショーを改造して、画像の右にコメントを付けました。 |
縦回転スライドショー | 横回転と同じ基本ソースで、縦回転。上から下も、逆の下から上も可能。画像マウスオンで停止し、リンクも設定可。 |
◇見本・こんなスライド ◇リンクのターゲット指定について ◆簡単スライドショー + Fフェード版・メニュー ◆面白スライドショー・メニュー ◆フェードスライドショー・メニュー ◆スライス効果スライドショー・メニュー ◆横スライドショー特集・メニュー ◆縦スライドショー特集・メニュー ◆サムネイルスライドショー・メニュー
◆サムネイルスライドショー・メニュー◆
並べられた小さな画像をマウスオンしたりクリックすると、拡大画像が表示されるスライドショーの紹介です。なお、フェードイン・アウト切替分は、フェード無し分のサムネイル・スライドショーのリンク付きです。コーナー作成日 : 2015/8/5
■サムネイルスライドショー■
フェード同一画像スライド | サムネ画像マウスオーバーで、拡大画像変更。拡大とサムネは同じ画像を使用。フェード無し分のリンク有り。フェード無し分はマウスオーバーとクリックの選択可で、画像サイズ違いOK。 |
フェード同画スライドtitle付 | 上記にtitleが付いたフェード切替です。サムネイルをマウスオンした時に表示される、画像説明文がtitleです。フェード無し分のリンク有り。 |
フェード同画スライドコメ付 | 上記にコメントが付いたフェード切替です。フェード無し分のリンク有り。 |
フェード別画スライドコメ付 | 上記コメント付きフェード切替を改造。拡大画像とサムネイル画像は別画像です。拡大画像が重い時に便利。フェード無し分のリンク有り。 |
フェード同画自動スライドtitle | フェード切替の自動スライドショーがサムネイルマウスオンで停止し、マウスアウトでサムネイル画像と同じ画像からスライド再開。title付き。フェード無し分のリンク有り。 |
F背景サムネ自動スライドtitle | 上記を改造。フェード切替自動で、サムネイル画像が縮小画像(img)ではなく、背景画像の切り取り画像(div)。フェード無し分のリンク有り。 |
フェード同画自動スライドコメ | 上々記を改造。フェード切替のコメント付きです。フェード無し分のリンク有り。 |
F同画自動スライドコメリンク | 上記を改造。フェード切替のコメントとリンク付きです。フェード無し分のリンク有り。 |
F別画像自動スライドコメ付 | 上々記を改造。フェード切替のコメント付きで、拡大画像とサムネイル画像は別画像。拡大画像が重い時に便利。フェード無し分のリンク有り。 |
F別画自動スライドコメLINK | 上記を改造。フェード切替のコメントとリンク付き。拡大画像とサムネイル画像は別画像。フェード無し分のリンク有り。 |
サムネイル・フェード | ふわっとフェードで切り替わるサムネイル・マウスクリックのスライドショー。拡大画像が高さ100%指定になっています。 |
サムネイルでポップアップ | サムネイルのクリックで、拡大画像が画面中央にポップアップ。拡大画像の表示スペースが不要で、スクロールしても画面中央にポップアップ。2015/03/21:前回分削除して別の短いJavaScriptに変更。 |
サムネでポップアップ移動 | 上記にドラッグ移動を追加。ポップアップした拡大画像を移動することが可能。2015/03/21:前回分削除して別の短いJavaScriptに変更。 |
別画サムネでポップアップ移動 | 上記と同じJavaScriptのソースですが、縮小画像と拡大画像が、別画像です。大量のサムネイル使用の時に便利。 |
超簡単CSS自動拡大サムネイル | JavaScriptは全く使用していません。CSSだけの自動拡大のスライドショー。動作がとても面白く、接頭語(ベンダープレフィックス)不要の簡単記述。 |
超簡単CSS拡大回転サムネイル | JavaScriptは全く使用していません。上記のCSSだけの自動拡大に左右回転をプラスしたスライドショー。動作がとても面白く、接頭語(ベンダープレフィックス)不要の簡単記述。 |