画像をランダムで表示するスクリプトの無料ダウンロード

公開日

2017年6月6日

最終更新日

2020年7月14日

あらかじめ設定しておいた複数の画像の中から1枚をランダムで表示させたい時ってありますよね。
それを実現するスクリプトです。
名称は「ランダムイメージスクリプト」としておきます。

現在の最新バージョンは2019年7月24日公開の1.1です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

主な特長

特長は以下の通り。

1. HTMLページに組み込める。
2. 設定はHTMLとCSSだけで済みます。JavaScriptファイルの編集は不要。
3. 画像の横幅や縦幅は自由。設定不要。
4. 画像の枚数も自由。設定不要。
5. jQuery不要。
6. 著作権表示不要。

サンプルとダウンロード

以下のサンプルページでは5枚の画像からランダムで1枚が表示されます。
ランダムイメージスクリプトのサンプル
ページを何度か再読み込みしてお試しください。
ランダムですから、同じ画像が連続で表示される可能性もあります。

ランダムイメージスクリプトのダウンロード

使い方の説明(基本設置方法)

まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、ダウンロードしたZIPファイルを展開し、すべてそのままサーバ上にアップロードする。

2、index.htmlにブラウザでアクセスし、表示を確認する。

既存サイトへの組み込み方法

3、index.htmlを参考に、表示させたい画像をリスト形式で組み込みたいページのHTML内に記述する。
最初は以下をindex.htmlからそのままコピーすると間違いがないでしょう。

<ul id="random-image">
  <li><img src="image/random-image-1.jpg" alt="" /></li>
  <li><img src="image/random-image-2.jpg" alt="" /></li>
  <li><img src="image/random-image-3.jpg" alt="" /></li>
  <li><img src="image/random-image-4.jpg" alt="" /></li>
  <li><img src="image/random-image-5.jpg" alt="" /></li>
</ul>

HTMLから画像ファイルまでのディレクトリ階層が深くなったりする場合は、以下のように適宜合わせてください。

<img src="ここを編集/image/random-image-1.jpg" alt="" />

4、CSSファイルとJavaScriptファイルの読み込みコードを追加する。

<link rel="stylesheet" href="css/random-image.css" />

<script src="js/random-image.js" async></script>

CSSファイルやJSファイルまでのディレクトリ階層が深くなったりする場合は、以下のように適宜合わせてください。

<link rel="stylesheet" href="ここを編集/css/random-image.css" />

5、表示させたい画像をimageフォルダに入れ、HTML内の各画像ファイル名をそれに合わせる。
画像ファイル名は自由に変更しても動作上に問題はありません。
画像を格納するフォルダ名をimage以外の名前にしてもOKです。

<ul id="random-image">
  <li><img src="image/ファイル名を合わせる-1.jpg" alt="" /></li>
  <li><img src="image/ファイル名を合わせる-2.jpg" alt="" /></li>
  <li><img src="image/ファイル名を合わせる-3.jpg" alt="" /></li>
  <li><img src="image/ファイル名を合わせる-4.jpg" alt="" /></li>
  <li><img src="image/ファイル名を合わせる-5.jpg" alt="" /></li>
</ul>

以上です。

画像の枚数の増やし方や表示確率の調整

「この画像を少し高い確率で表示させたい」という場合、本来ならばJavaScriptファイル内で確率の計算などをするのがベストでしょう。
がしかし、以下のようにすればHTMLファイルの編集だけで確率を調整することも可能です。

初期状態のindex.htmlで以下のようになっているのを、

<ul id="random-image">
  <li><img src="image/random-image-1.jpg" alt="" /></li>
  <li><img src="image/random-image-2.jpg" alt="" /></li>
  <li><img src="image/random-image-3.jpg" alt="" /></li>
  <li><img src="image/random-image-4.jpg" alt="" /></li>
  <li><img src="image/random-image-5.jpg" alt="" /></li>
</ul>

以下のようにすれば、random-image-1.jpgが50％の確率で表示されることになるでしょう。

<ul id="random-image">
  <li><img src="image/random-image-1.jpg" alt="" /></li>
  <li><img src="image/random-image-1.jpg" alt="" /></li>
  <li><img src="image/random-image-1.jpg" alt="" /></li>
  <li><img src="image/random-image-1.jpg" alt="" /></li>
  <li><img src="image/random-image-2.jpg" alt="" /></li>
  <li><img src="image/random-image-3.jpg" alt="" /></li>
  <li><img src="image/random-image-4.jpg" alt="" /></li>
  <li><img src="image/random-image-5.jpg" alt="" /></li>
</ul>

画像の枚数が増えた分、ページの表示が遅くなると思いがちですが、実際には最初の1枚(random-image-1.jpg)を読み込んだ時点でブラウザにキャッシュされるため、同じ画像を何回読み込んだとしても表示速度はほぼ変わらないと思います。

注意点

本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。

不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。

サポートに関して

無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。

初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。

しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2017/06/06　バージョン1.0

• 公開。

2019/07/24　バージョン1.1

• 動作タイミングを早めました。
• random-image.cssから不要なコードを削除しました。
• async属性を付けても問題なく動作するように修正。