Webページ上にある画像やコンテンツ要素を
ページをロードするたびにランダムで表示を切り替える方法について
お問い合わせやコメントで聞かれることが数多くあったので
＜img＞タグのsrc属性をランダムで設定することで画像をランダムに切り替えるパターンと
複数のCSSクラスをランダムで付与することで表示する背景画像を切り替えるパターンの
2種類の方法を紹介してみます。
【＜img＞タグ切り替え】jQueryで画像をランダムに切り替える方法
「【＜img＞タグ切り替え】jQueryで画像をランダムに切り替える方法」サンプルを別枠で表示
ページを更新するたびに5種類の画像がランダムで切り替わります。
構造としては＜img＞タグのsrc属性をランダムで書き換えることで
画像を切り替えています。
※ランダムで表示する最大枚数は任意で設定可能です。
この＜img＞タグのsrc属性ランダム切り替えの全体構成について
まずはHTMLから。
◆HTML <img src="img/blank.jpg" alt="" id="randomShow">
対象とする＜img＞タグに任意のIDもしくはクラスをつけます。
src属性の中はスクリプト側で書き換えますが、
ブラウザによって、ページロードの際に画像が表示できない場合の「×」印が
一瞬表示されてしまわないように、サンプルでは1px×1pxの仮画像を読み込ませておきます。
（ここのsrc属性は空とかにしておいても大丈夫です）
実際に表示する画像のファイル名は
共通の名前にナンバリングを付けた形で用意しておきます。
img/photo1.jpg img/photo2.jpg img/photo3.jpg img/photo4.jpg img/photo5.jpg
＜img＞タグで画像を切り替える場合は
CSSの記述は特に動作に影響しない部分になりますので
CSSについては割愛します。
そして実際のランダム表示用のスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
var maxNum = 5, // 最大枚数
rdm = Math.floor(Math.random()*(maxNum))+1;
$('#randomShow').attr('src', 'img/photo' + rdm + '.jpg');
});
</script>
スクリプト開始部分にある「maxNum」の設定値が
ランダムで表示する画像の最大枚数になります。
スクリプト5行目で最大値「maxNum」の値を使って
6行目で「Math.random()」を使って最大値と計算し
ランダムで1～5までの値を生成します。
生成した値は7行目のsrc属性を指定する中で
画像ファイルの数字部分に当て込むことでパスを設定します。
この動作サンプルではID名を付けた形で切り替えていますが
画像が一枚しかない構成のページの場合は「#randomShow」の部分を「img」とすることで
タグ自体を対象とさせることも可能です。
続いて、同様の方法で＜img＞タグを切り替えるのではなく
複数のCSSクラスをランダムで切り替えるパターンについて。
【CSSクラス切り替え】jQueryで画像をランダムに切り替える方法
「【CSSクラス切り替え】jQueryで画像をランダムに切り替える方法」サンプルを別枠で表示
ページを更新するたびに5種類の画像がランダムで切り替わります。
※ランダムで表示する最大枚数は任意で設定可能です。
＜img＞タグのsrc属性を書き換えるのではなく
CSSクラスをランダムで付与させることで
各クラスに設定した画像とボーダーカラーの表示を切り替えています。
このCSSクラスのランダム切り替えの全体構成について
まずはHTMLから。
◆HTML <div id="randomShow"></div>
対象とする要素に任意のIDもしくはクラスをつけます。
サンプルではdivブロック要素にしています。
この要素に対してCSS側で複数のクラスを用意します。
◆CSS
#randomShow {
margin: 0 auto;
width: 400px;
height: 400px;
}
.setView1 {
background: url(../img/photo1.jpg) no-repeat left top;
border: #ff3333 10px solid;
}
.setView2 {
background: url(../img/photo2.jpg) no-repeat left top;
border: #3333ff 10px solid;
}
.setView3 {
background: url(../img/photo3.jpg) no-repeat left top;
border: #ff33ff 10px solid;
}
.setView4 {
background: url(../img/photo4.jpg) no-repeat left top;
border: #ffff33 10px solid;
}
.setView5 {
background: url(../img/photo5.jpg) no-repeat left top;
border: #33ff33 10px solid;
}
ランダムで付与するCSSクラス名は
共通の名前にナンバリングを付けた形で用意しておき、
それぞれ別々の画像を背景画像で指定します。
サンプルではクラス名の「setView」が共通の名前になり
その後ろに続く数字をランダムで生成することになります。
そして実際のランダム表示用のスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
var maxNum = 5, // 最大枚数
rdm = Math.floor(Math.random()*(maxNum))+1;
$('#randomShow').addClass('setView' + rdm);
});
</script>
最初のサンプル同様に、開始部分にある「maxNum」の設定値で
ランダムで表示する画像の最大枚数を指定します。
スクリプト5行目で最大値「maxNum」の値を使って
6行目で「Math.random()」を使って最大値と計算し
ランダムで1～5までの値を生成します。
生成した値は7行目のCSSクラス設定の部分で
クラス名の数字部分に当て込むことで付与するクラスを設定します。
ランダム表示の基本動作としては
最初の＜img＞タグ切り替えのスクリプトとほぼ変わっていませんが
このようにCSSクラスを切り変えることで画像だけでなくボーダーカラーを変えたり、
さまざまな装飾等のCSSプロパティをランダムに切り替えることが可能になります。
以上の2パターンにて
画像をランダムで切り替える方法の紹介でした。
ランダム切り替えのスクリプトを応用することで
画像の切り替えだけでなく、コンテンツ要素の切り替えなども可能になるかと思います。
画像の切り替えではなくリストの並び等をランダムで制御するような場合は
別記事の「jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法」を
ご参考ください。
【参考】jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
ランダム切り替えが必要な際にぜひ。。。