画像をランダムに表示することは、非常に広く使用されている技術です。たとえば、Web サイトに入ると、常に異なるバナーが表示されたり、常に異なる内容のヒントが表示されたりする例は、インターネットを閲覧しているときによく見かけます。このテクノロジーを使用すると、より多くのコンテンツを特定のスペースに配置できるだけでなく、人々に頻繁に更新されているような錯覚を与えることもできます。
どれくらい興奮していますか？実際、HTML と JavaScript の基本的な知識があれば、すべては非常に簡単です。私をフォローして、彼女のランダムな秘密を見てみましょう。
簡単な例から始めましょう。通常、<img src="picture"> を使用してページに画像を追加します。 3 つの異なる画像をランダムに表示したい場合は、このコードに少し変更を加える必要があります。まず、<script> タグを追加します。
以下は引用部分です。
<script language=javascript></script>
次に、document.write("") を使用してこのタグに <img src="picture"> を挿入すると、次のようになります。
document.write("<img src=image>")
さて、最も重要な段落を終えましょう。
引用は次のとおりです。
id=Math.round(Math.random()*2)+1
このようにして、乱数は 1、2、3 として得られます。表示したい画像の名前を 1.gif、2.gif、3.gif に変更します。ok!最終的なコードは次のとおりです。
引用スニペットは次のとおりです。
<スクリプト言語=javascript>
id=Math.round(Math.random()*2)+1
document.write("<img src="+id+".gif>")
</script>
試してみてください、良いでしょう？では、各画像がハイパーリンクに対応している場合はどうなるでしょうか?
1.gif、2.gif、3.gif の 3 つの画像があり、対応するリンクが url1、url2、および url3 であると仮定します。
画像とリンクを 1 対 1 で対応させるには、次のようにリンクのアドレスを配置する配列画像を設定する必要があります。
以下は参照フラグメントです。
var image=新しい配列(3)
画像.長さ=3
画像[1]="url1"
画像[2]="url2"
画像[3]="url3"
画像に対応するリンクを取得するには、配列 imageurl=image[id] を定義する必要もあります。
原則は次のとおりです。
ページが読み取られるときに乱数が取得され、それが 2、つまり id=2 であると仮定すると、上記のようにページ上に 2.gif を簡単に表示できます。次に、imageurl=image[2] と image[2]="url2" がわかります。残りは簡単です。完全なコードは次のとおりです。
以下は引用符で囲まれた部分です。
<スクリプト言語=javascript>
var image=新しい配列(3)
画像.長さ=3
画像[1]="url1"
画像[2]="url2"
画像[3]="url3"
id=Math.round(Math.random()*2)+1
imageurl=画像[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>
転載元：七色鳥デザイン---pc-king