初心者です。よろしくお願い致します。
複数ページ存在するうちの、各ページを更新するごとにランダムに変わる、重複しない5枚の画像を表示させたいと思います。
今現在、サイト上に掲載されてあったJavaScriptのサンプルを自分なりに変更してテストしているのですが、「重複しない」というところで壁にぶち当たってしまっています。
下記が現在のスクリプトです。
<body>
<script language="JavaScript"><!--
jumpURL = new Array();
imgURL = new Array();
jumpURL[0] = "アドレス";
jumpURL[1] = "アドレス
jumpURL[2] = "アドレス";
jumpURL[3] = "アドレス";
jumpURL[4] = "アドレス";
jumpURL[5] = "アドレス";
jumpURL[6] = "アドレス";
jumpURL[7] = "アドレス";
imgURL[0] = "top_img01.jpg";
imgURL[1] = "top_img02.jpg";
imgURL[2] = "top_img03.jpg";
imgURL[3] = "top_img04.jpg";
imgURL[4] = "top_img05.jpg";
imgURL[5] = "top_img06.jpg";
imgURL[6] = "top_img07.jpg";
imgURL[7] = "top_img08.jpg";
a = Math.floor(Math.random()*jumpURL.length);
document.write("<a href='"+jumpURL[a]+"'>");
document.write("<img src='"+imgURL[a]+"' border='0'><br>");
document.write("</a>");
b = Math.floor(Math.random()*jumpURL.length);
document.write("<a href='"+jumpURL[b]+"'>");
document.write("<img src='"+imgURL[b]+"' border='0'><br>");
document.write("</a>");
c = Math.floor(Math.random()*jumpURL.length);
document.write("<a href='"+jumpURL[c]+"'>");
document.write("<img src='"+imgURL[c]+"' border='0'><br>");
document.write("</a>");
d = Math.floor(Math.random()*jumpURL.length);
document.write("<a href='"+jumpURL[d]+"'>");
document.write("<img src='"+imgURL[d]+"' border='0'><br>");
document.write("</a>");
e = Math.floor(Math.random()*jumpURL.length);
document.write("<a href='"+jumpURL[e]+"'>");
document.write("<img src='"+imgURL[e]+"' border='0'><br>");
document.write("</a>");
// --></script>
</body>
現在では、画像枚数が8枚ですが、4、50枚に増える予定です。
また、スクリプトを書きやすくするために画像ファイルの名前をどのように変更してもかまわないと思っています。
上記のスクリプトは5枚の画像が表示されることはされるのですが、更新してから表示するまでの待ち時間が長いのが気になるので、できれば、欲を言うならば、早く表示してくれるようなスクリプトをご伝授していただければと思います。
よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
シャッフルする部分と表示する部分をわけるとわかりやすい
<head>
<script>
jumpURL =[
{url:"アドレスA",alt:"A",img:"top_img01.jpg"}
,{url:"アドレスB",alt:"B",img:"top_img02.jpg"}
,{url:"アドレスC",alt:"C",img:"top_img03.jpg"}
,{url:"アドレスD",alt:"D",img:"top_img04.jpg"}
,{url:"アドレスE",alt:"E",img:"top_img05.jpg"}
,{url:"アドレスF",alt:"F",img:"top_img06.jpg"}
,{url:"アドレスG",alt:"G",img:"top_img07.jpg"}
,{url:"アドレスH",alt:"H",img:"top_img08.jpg"}
];
jumpURL.shuffle=shuffle;
jumpURL.shuffle();
function shuffle(){
var temp=0;
for(var i=0;i<this.length -1 ;i++){
var num=Math.floor(Math.random()*(this.length-i));
temp=this[i];
this[i]=this[num+i];
this[num+i]=temp;
}
}
</script>
</head>
<body>
<script>
for(var i=0;i<5;i++){
document.write("<a href='"+jumpURL[i].url+"'><img src='"+jumpURL[i].img+"' alt='"+jumpURL[i].alt+"' border='0'></a><br>");
}
</script>
</body>
No.2
- 回答日時:
<html>
<body>
<script>
var url =[
'http://www.0', 'http://www.1','http://www.2', 'http://www.3',
'http://www.4', 'http://www.5', 'http://www.6', 'http://www.7'
];
var imgfile =[
'img0.gif','img1.jpg','img2.jpg','img3.jpg',
'img4.jpg','img5.jpg','img6.jpg','img7.jpg'
];
var n=5;
var n2=imgfile.length;
for(var i=0,f=[],bf=[];i<n;i++) {
while(f[rd=Math.random()*n2|0]); f[rd]=1;
document.write('<img src="'+imgfile[rd]+'" alt="'+imgfile[rd]+'" onClick="location.href=\''+url[rd]+'\'"><br>');
}
</script>
</body></html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数画像のランダム複数表示(...
-
外部javascriptの重複を防ぐには
-
複数の画像をフェードイン・ア...
-
nodejsの画像表示は特別なこと...
-
dtで横並び
-
画像が表示でnull; this.src
-
以下のタグはクリックすると画...
-
【OpenCV】二値画像後、白の部...
-
OpenCVでの画像からの顔検出
-
MFCで画像を表示させているので...
-
javaScriptでリンク画像のラン...
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
jqueryで要素の中身を要素の外...
-
変数内容をHTML内で表示する方法
-
c++std::string型をTCHARに変換...
-
removeEventListenerについて
-
CSS <div>の入れ子が反映さ...
-
JSPでの画像ファイル表示
-
フッター上部に謎の隙間
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
画像が表示でnull; this.src
-
外部javascriptの重複を防ぐには
-
libjpegライブラリの使い方につ...
-
MFCで画像を表示させているので...
-
条件分岐でキーが入力されてい...
-
【OpenCV】二値画像後、白の部...
-
外部ファイルにしたら文字化け...
-
error LNK2019 未解決のシンボ...
-
jqueryスライドショーをストッ...
-
Vb.net2005での画像の合成方法
-
複数の画像をフェードイン・ア...
-
複数画像のランダム複数表示(...
-
ラズパイでno module named zbar
-
OpenCV 2値化について
-
リンク先を動的に変更する
-
HTMLからimgのsrcのみを正規表...
-
nodejsの画像表示は特別なこと...
-
jqueryのスライドショー。html...
-
onclickで画面が固まる・・・ら...
おすすめ情報