[JS]jQuery で画像をランダムに出力する方法
スポンサード
CSS で背景画像を表示させる要素に「幅」と「高さ」などを指定しておきます。
スポンサード
jQuery を利用して、ページのアクセス毎に複数枚の画像の中からランダムで1 枚の画像を表示させる方法です。
今回は <img> タグの画像を使う場合と、CSS の background-image に背景画像を指定する場合の2種類の方法を紹介させていただきます。
目次
jQuery で <img> タグの画像をランダム表示
今回は全部で5 枚の画像ファイルの中から、アクセスするたびに1 枚の画像をランダムで表示させてみます。Javascript の記述
jquery ファイルと一緒に <head> 内に以下のように記述します。<script src="./jquery.min.js"></script> <script> $(function() { var array = [ "images/images01.jpg", "images/images02.jpg", "images/images03.jpg", "images/images04.jpg", "images/images05.jpg" ]; var l = array.length; var r = Math.floor(Math.random()*l); var imgurl = array[r]; $("img#randomimg").attr({"src":imgurl}); }); </script><img> タグ にID(#randomimg)を指定します。
HTML の記述例
画像を表示させたい場所に、以下のように記述します。<img id="randomimg">↓こちらの画像が、ページをリロードする毎にランダムで切り替わります。
CSS の background-image で指定した背景画像をランダム表示
やり方は先の <img> タグの例とほぼ同じです。Javascript の記述
jquery ファイルと一緒に <head> 内に以下のように記述します。<script src="./jquery.min.js"></script> <script> $(function() { var array = [ "images/images01.jpg", "images/images02.jpg", "images/images03.jpg", "images/images04.jpg", "images/images05.jpg" ]; var l = array.length; var r = Math.floor(Math.random()*l); var bgimgurl = array[r]; $("div#randomimg2").css('background-image',('url("'+bgimgurl+'")')); }); </script>15 行目の記述を背景画像を表示させる要素(div#randomimg2)に変更して、background-image のプロパティを追加します。
HTML の記述例
<div> タグ にID(#randomimg2)を指定します。CSS で背景画像を表示させる要素に「幅」と「高さ」などを指定しておきます。
<style> #randomimg2 { width:300px; height:225px; background-repeat:no-repeat } </style> <div id="randomimg2"></div>↓同じくこちらの画像(背景画像)が、ページをリロードするとランダムで切り替わります。
スポンサード
はじめまして。
アクセスするたびに画像を切り替えるjavascriptは無いかと
探していたらこちらのページにたどり着きました。
さっそく試させて頂いたら、見事成功しました。(^.^)
非常に助かりました。ありがとうございます。