スライドショー

説明 ◆スライドショー◆ ページ内メニュー 

見本・こんなスライド  ◇リンクのターゲット指定について  ◆簡単スライドショー + 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)

◇見本・こんなスライドがコピペで作れます!  ◆横スライドショー特集◆

画像マウスオンで停止します

このスライドショーは、■横スライド1■左から右へ重なる移動・リンク有■です。2枚だけリンク付きです。

◇リンクのターゲット指定について 

スライドショーには、画像にリンクが付いているモノがあります。
リンクのターゲット指定の初期値は「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フェード版・メニュー  ◆面白スライドショー・メニュー  ◆フェードスライドショー・メニュー  ◆スライス効果スライドショー・メニュー  ◆横スライドショー特集・メニュー  ◆縦スライドショー特集・メニュー  ◆サムネイルスライドショー・メニュー

◆面白スライドショー・メニュー◆

それでは、スライドの表示の仕方がとても面白いスライドショーのご紹介です。
とにかくコピペすれば、面白い動きが楽しめます。

■面白スライドショー■


見本・こんなスライド  ◇リンクのターゲット指定について  ◆簡単スライドショー + Fフェード版・メニュー  ◆面白スライドショー・メニュー  ◆フェードスライドショー・メニュー  ◆スライス効果スライドショー・メニュー  ◆横スライドショー特集・メニュー  ◆縦スライドショー特集・メニュー  ◆サムネイルスライドショー・メニュー

◆フェードスライドショー特集・メニュー◆

フェードイン・フェードアウトで、ふわっと切り替わるスライドショーの紹介です。コーナー作成日 : 2015/8/5
ただしフェード使用でも、横移動や縦移動やサムネイル形式のスライドショーは、その該当メニューの方にあります。
フェードの全面スライドや背景画像のスライドショーのJavaScriptは、『動く背景』のジャンルにあります。

■フェードスライドショー■


見本・こんなスライド  ◇リンクのターゲット指定について  ◆簡単スライドショー + Fフェード版・メニュー  ◆面白スライドショー・メニュー  ◆フェードスライドショー・メニュー  ◆スライス効果スライドショー・メニュー  ◆横スライドショー特集・メニュー  ◆縦スライドショー特集・メニュー  ◆サムネイルスライドショー・メニュー

◆スライス効果スライドショー特集・メニュー◆

画像がスライスされたように、次の画像に切り替わるスライドショーです。
スライス効果のスライドショーの数が多くなったので、コーナーをこちらに作成しました。 コーナー作成日 : 2017/09/03

■スライス効果スライドショー■
 全件グローバル変数を削除済み:2017/09/03 


見本・こんなスライド  ◇リンクのターゲット指定について  ◆簡単スライドショー + Fフェード版・メニュー  ◆面白スライドショー・メニュー  ◆フェードスライドショー・メニュー  ◆スライス効果スライドショー・メニュー  ◆横スライドショー特集・メニュー  ◆縦スライドショー特集・メニュー  ◆サムネイルスライドショー・メニュー

◆横スライドショー特集・メニュー◆

画像が横へスライドしたり、コンベアベルト式に画像が横にスクロールするスライド、横回転スライドなど、左右に動くスライドショーの数が多くなったので、コーナーをこちらに作成しました。 コーナー作成日 : 2014/11/09

■横スライドショー■


見本・こんなスライド  ◇リンクのターゲット指定について  ◆簡単スライドショー + Fフェード版・メニュー  ◆面白スライドショー・メニュー  ◆フェードスライドショー・メニュー  ◆スライス効果スライドショー・メニュー  ◆横スライドショー特集・メニュー  ◆縦スライドショー特集・メニュー  ◆サムネイルスライドショー・メニュー

◆縦スライドショー特集・メニュー◆

画像が縦へスライドしたり、縦にスクロールするスライド、縦回転スライドなど、上下に動くスライドショーの数が多くなったので、コーナーをこちらに作成しました。 コーナー作成日 : 2014/12/22

■縦スライドショー■


見本・こんなスライド  ◇リンクのターゲット指定について  ◆簡単スライドショー + Fフェード版・メニュー  ◆面白スライドショー・メニュー  ◆フェードスライドショー・メニュー  ◆スライス効果スライドショー・メニュー  ◆横スライドショー特集・メニュー  ◆縦スライドショー特集・メニュー  ◆サムネイルスライドショー・メニュー

◆サムネイルスライドショー・メニュー◆

並べられた小さな画像をマウスオンしたりクリックすると、拡大画像が表示されるスライドショーの紹介です。
なお、フェードイン・アウト切替分は、フェード無し分のサムネイル・スライドショーのリンク付きです。コーナー作成日 : 2015/8/5

■サムネイルスライドショー■


見本・こんなスライド  ◇リンクのターゲット指定について  ◆簡単スライドショー + Fフェード版・メニュー  ◆面白スライドショー・メニュー  ◆フェードスライドショー・メニュー  ◆スライス効果スライドショー・メニュー  ◆横スライドショー特集・メニュー  ◆縦スライドショー特集・メニュー  ◆サムネイルスライドショー・メニュー


TOP

END
Google ネット検索 サイト内検索