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

公開日

2017年6月6日

最終更新日

2021年10月25日

著者

Motohiro Tani

あらかじめ設定しておいた複数の画像の中から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)を読み込んだ時点でブラウザにキャッシュされるため、同じ画像を何回読み込んだとしても表示速度はほぼ変わらないと思います。

注意点

サポートに関して

カスタマイズに関して

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

アップデート履歴

2017/06/06　バージョン1.0

• 公開。

2019/07/24　バージョン1.1

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