javascriptがあまり分からなくてもランダムに画像や要素ローテーション表示する方法

javascriptがあまり分からなくてもでランダムに画像や要素を表示する方法
このエントリーをはてなブックマークに追加
PR

PHP側でもランダムにして表示することも可能ですが、動的なページをキャッシュして静的なページにしている場合などには、PHPは動かないので出来ません

そんな時にjavascriptをHTMLに組み込んでおけばキャッシュの有無にかかわらず
ランダムな動作を実装することが出来ます

ランダムに一つ表示できるようになれば何かと便利です。

 

javascriptを使ってランダムに一つ表示する方法

DEMOページ

動作はDEMOページで確認して下さい

<script>
<!--
youso = new Array();
 
// 表示させたいHTMLをそれぞれ入れてください、個数は自由に増やせますが[]内の数字が0から始まって連続するようにしてください
youso[0] = '<a href="#Link1">Link1</a>';
youso[1] = '<a href="#Link2">Link2</a>';
youso[2] = '<a href="#Link3">Link3</a>';
youso[3] = '<a href="#Link4">Link5</a>';
youso[4] = '<a href="#Link5">Link5</a>';
youso[5] = '<a href="#Link6">Link6</a>';
 
n = Math.floor(Math.random()*youso.length);
document.write(youso[n]);
//-->
</script>

<noscript>
 //javascriptが無効の時に表示するもの
 <a href="#Link1">Link1</a>
</noscript>

 

youso[0] ~ youso[5] までありますが好きな数だけ増やせます
= の後の内容を好きなHTMLに変えればそれが表示されるようになります

仕組みは yousoに配列としてHTMLを格納して
ランダムな数字を作り出して、そのランダムな数字を元に配列に格納されたものを呼び出して
document.writeで書き出しています

 

参考ページ
http://javascript.eweb-design.com/0804_ri.html

参考ページのコードをjavascriptに精通していなくても使いやすいように少し改良しました

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)