こちらの質問を参考に同じ様に画像をランダムするものを作りました。
http://oshiete.goo.ne.jp/qa/716071.html
No.3の回答を参考に一緒のものを作り、正常に動作しております。
ここからさらに、画像に合わせたリンク先へ飛ばしたいのですが
(0.jpg→0.html 1.jpg→1.html 2.jpg→2.html の様に)
どう手を加えればいいでしょうか?アドバイスよろしくお願いします。
【以下javascriptの部分】
<script type="text/javascript"><!--
NoMem = new Array();
function RndmNo(n){
x=Math.floor(Math.random()*100);//「Math.random()*100」の"100"は、用意している画像ファイルの枚数を指定
if (NoMem.length){
for (j=0; j<NoMem.length; j++){
if (NoMem[j]==x){ RndmNo();}
}
}
NoMem[n]=x;
}
for (k=0; k<3; k++){
RndmNo(k);
}
//以上、乱数を生成して配列に格納。
RndImg= new Array();
for (i=0; i<3; i++){
RndImg[i]= new Image();
RndImg[i].src="images/image"+NoMem[i]+".jpg";
//「"images/image"」には画像ファイルへのパスの共通部分を、「".jpg"」には画像ファイルに共通の拡張子を入れます
}
//イメージオブジェクトとして表示する画像を取得
function ImgDisp(){
document.images["imgs0"].src=RndImg[0].src;
document.images["imgs1"].src=RndImg[1].src;
document.images["imgs2"].src=RndImg[2].src;
}
window.onload=ImgDisp;
//--></script>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
順番をシャッフルして、その順に出力させます。
画像数が増減した場合を考えておきましたが、
固定なら/*または~*/のコメントアウトを外して
そちらを使ってみてください。
画像位置が特定ブロック内に収まっておらず、
バラバラの場合でも使えるかも。
<script type="text/javascript">
function rdmImgLink(){
var imgs = document.getElementById("box").getElementsByTagName("IMG");
/*または
var imgs = [
document.images["imgs0"],
document.images["imgs1"],
document.images["imgs2"]];
*/
var i, len = imgs.length, n=[], rdm=[], links = [], L = len, r, tmp, x;
//初期化
for( i = 0; i < len; i++ ){
n[i] = i; //0,1,2,....
rdm[i] = imgs[i].src;
links[i] = imgs[i].parentNode.href;//imgの親ノード:Aのリンク先
}
//シャッフル:Fisher-Yates法
while( L ){
r = Math.floor( Math.random() * L );
tmp = n[--L];n[L] = n[r];n[r] = tmp;
}
//出力
for( i = 0; i < len; i++ ){
x = n[i]; //シャッフルされた番号
imgs[i].src = rdm[x];
imgs[i].parentNode.href = links[x];
imgs[i].alt = "imgs" + x;
}
}
//window.onload
//@cc_on
window./*@if(@_jscript_version<=5.8)
attachEvent('on'+ @else @*/ addEventListener(/*@end @*/
'load', function(){
rdmImgLink();
}, false );
</script>
</head>
<body>
<div id="box">
<p><a href="0.html"><img name="imgs0" src="images/image0.jpg" alt="imgs0" width="190" height="40"></a></p>
<p><a href="1.html"><img name="imgs1" src="images/image1.jpg" alt="imgs1" width="190" height="40"></a></p>
<p><a href="2.html"><img name="imgs2" src="images/image2.jpg" alt="imes2" width="190" height="40"></a></p>
</div>
</body>
</html>
No.1
- 回答日時:
<div>
<a href="0.html"><img src="0.jpg" alt="test0"></a>
<a href="1.html"><img src="1.jpg" alt="test1"></a>
<a href="2.html"><img src="2.jpg" alt="test2"></a>
<script type="text/javascript">
(function (doc) {
(function (n, r) {
var a, i, L, no;
a = n.getElementsByTagName('A');
for (i = 0, L = a.length; i < L; ++i) {
no = Math.floor(Math.random() * 100);
r.call (a[i], 'href', no);
r.call (a[i].getElementsByTagName('IMG')[0], 'src', no);
}
}) (
(function () {
var n = doc.getElementsByTagName('SCRIPT');
return n[n.length-1].parentNode;
}) (),
function (a, no) {
this[a] = this[a].replace(/\d+(\.[^.]+)$/, no + '$1');
}
);
}) (document);
</script>
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
これはどんなJavaScriptなので...
-
outlook2010の不具合で困ってい...
-
jQueryでサーバー上のファイル...
-
透過pngの透明部分以外をクリッ...
-
jQueryでタブ切り替え
-
jQueryでシンプルドラッグドロ...
-
javascriptテキストBOX色を元に...
-
jQueryでネスト構造の<li>がク...
-
変数内容をHTML内で表示する方法
-
「jQuery」アコーディオンメニ...
-
「画像クリックで音声再生」を ...
-
JavaScriptで、?マークとコロ...
-
jQueryでヒアドキュメントを使...
-
1枚の画像をクリックして複数の...
-
画像を切り替えランダム表示
-
jQueryで同じid属性が複数あっ...
-
JSPでの画像ファイル表示
-
javaを使ってマウスオンでの画...
-
JimdoでWebアイコンフォントの...
-
javascriptによる画像切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の座標位置取得
-
window.openで値の渡し方を教え...
-
画像と文字を同時に切り替えたい
-
jQueryで画像を重ねる
-
this.src等のthisについて
-
画像の下に説明文をつけて切り...
-
画像をクリックすると別ウイン...
-
JAVAで画像をボタンで切り替え...
-
クリックで次の画像へ
-
imgのsrcに値を設定するには
-
画像アップロードしたい
-
複数の画像の中から複数の画像...
-
画像をクリックして変数に値を代入
-
jQueryでサーバー上のファイル...
-
複数のバナーをリロードする度...
-
タイマーをデジタル時計風にす...
-
divの背景画像を、徐々に表示さ...
-
スマートな外部javaでロールオ...
-
一定時間で画像を変更するスク...
-
連番画像「次へ」「前へ」で、...
おすすめ情報