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

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

公開日 : 2017年6月6日
最終更新日 : 2017年6月6日

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

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

サンプルとダウンロード

以下のサンプルページでは5枚の画像からランダムで1枚が表示されます。

ランダムイメージスクリプトのサンプル: https://www.1-firststep.com/samplephp/random-image/index.html
ページを何度か再読み込みしてお試しください。
ランダムですから同じ画像が2回連続で表示される可能性もあります。
ランダムイメージスクリプトのダウンロード: https://www.1-firststep.com/samplephp/random-image/random-image.zip

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

1、ダウンロードしたrandom-image.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>

4、設置したディレクトリ階層に合わせ、CSSとJavaScriptファイルの読み込みパスを調整する。
上記の手順3にある画像ファイルへのパスも合わせてください。

<link rel="stylesheet" type="text/css" href="ここを調整/css/reset.css" />
<link rel="stylesheet" type="text/css" href="ここを調整/css/random-image.css" />

<script type="text/javascript" src="ここを調整/js/random-image.js"></script>

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

<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>

6、表示させたい画像のサイズやサイトに合わせ、random-image.css内でul要素の横幅など適当に調整してください。

ul#random-image {
  width : 500px;
  margin : 0px auto;
  list-style-type : none;
}

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

「この画像を少し高い確率で表示させたい」という場合、本来ならば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)を読み込んだ時点でブラウザにキャッシュされるため、同じ画像を何回読み込んだとしても表示速度はさほど変わらないと思います。