Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

イラスト

Web

JQueryのランダム要素簡単実装

使用ソフト: h1{color:red;}  

○はじめに

難しそうですが案外簡単に使えますので、初心者の方向けにざっくり解説したいと思います。
詳細は私も解らないのでググってください。
今回はリロードする度にランダムで1枚画像が表示されるようにします。

※最初から解説すると長くなるのでJqueryの導入方法については飛ばします。

①任意のhtml・js・jquery・imgのファイルを用意します

thmlファイルのheadタグ内にjs・jqueryを記述して全て連動させます。
(必要であればcssも。今回は省きます。)

imgファイルの中には3枚以上img画像が入っているとわかりやすいです。
今回は、下の画像4枚でやってみます。
イラスト

②htmlを記述します。

通常のimgと同じように記述しますが、scrタグの中は””(ダブルクォーテーション)だけつけて、
画像を入れずに空にしておきます。

<img id="img"  src="" alt="イラスト" />

!この時に『id』か『class』どちらでもいいので必ずつけておいてください(後で使います)!

③jsの外側のところを記述します。

最初に下の画像にあるように記入します。
この時に大切なのは「なんで?どうして?」などと考えないことです。
ここの部分は『決まり文句』なのでそのまま記述しましょう。

$(function(){});

④jsの内側のところ({}の中身)を記述します。

下の画像のように打ち込みます。

var A = ['img/img01.gif',
         'img/img02.gif',
         'img/img03.gif',
         'img/img04.gif'
         ];

これは、『Aという名前の箱にimg01,02,02,04が収納されている』状態です。

その下にもうひとつコードを打ち込みます。

var B = A[Math.floor(Math.random()*A.length)];
	$('#img').attr('src',B);

ここは、
❶『Bという名前の箱のAの箱が入っている』
という状態から

❷『Aの箱の中からランダムに1枚画像を取り出す』
さらに

❸『取り出した画像を#img(指定のid)の『src』に記述する』
という意味になります。

なんか複雑な気がしますが『[』を打つと自動的に予測変換で出してくれるので、
下の画像の通りに打ちます。

!この時に箱の名前(A・Bの部分)とid(もしくはclass)を間違えると動きません。
注意してください!

③④合わせるとこんな感じになります。

$(function(){
	var A = ['img/img01.gif',
		 'img/img02.gif',
		 'img/img03.gif',
		 'img/img04.gif'
		];
});	

⑤ブラウザで動くか確認します。

ブラウザで開いてみて、何回かリロードしてみます。
画像が切り替われなければどっか間違ってます。コードを見直しましょう。

画像が切り替われば成功です。

以上で解説は終わりです。
案外なんとかなったのではないでしょうか?

ならなかった場合は、ここのコードをコピって、箱の名前とid名を変更して使いましょう。
めちゃ楽です!

本当は見本をつけたかったのですが、うまくいかなかったので諦めました!jqueryのプラグインでスライドとか使う時に組み合わせたりすると、
画像の並びがランダムになったり、色々な演出ができるので、機会があれば使ってみてください。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  2. Web

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

  3. Web

    cssだけで、グラデーション入りのラインを作る!

    cssの擬似要素を使った、グラデーション入りのボーダーラインを作りまし…

  4. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  5. Modern Fluid Typography Editor

    Web

    簡単なCSSでフォントサイズをレスポンシブ対応にしよう!

    フォントサイズのレスポンシブ対応WEBサイトをレスポンシブ対応にす…

  6. FC2ホームページ 登録からサイトのアップロード

    Dreamweaver

    FC2ホームページ 登録からサイトのアップロードまでの手順

    登録1.ユーザーとIDの登録1.「FC2ホームページ」と検索し…

人気の記事

おすすめの参考書

PAGE TOP