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. Subtle Patterns

    Web

    WEBサイトの背景などに!商用OKの無料テクスチャ素材サイト「Subtle Patterns」の紹介…

    みなさんウェブサイト作りは捗っていますでしょうか?自分はやっとトップペ…

  2. Web

    【実例サンプルあり】簡単に実装できるcssスニペット集

    この記事では、短いコードで実装可能なcssプロパティを紹介して…

  3. Web

    【CSS】CSS Gradientで複雑なグラデーションを作成

    CSS Gradientというフリーサイトを使ってCSSで複雑なグラデ…

  4. Web

    CodePenの使い方を極めよう

    jqueryでスライダーなど調べた際に、出てくる「CodePen」を…

  5. CSS Grid Layoutで複雑なレイアウトを3ステップで作成

    Web

    【CSS】Grid Layoutで複雑なレイアウトを作成

    最近、Pinterestのようなギャラリーページなどで大きさが異なる画…

  6. Web

    ハンバーガーメニューはなぜ動くのか!CSSだけ& jQuery使用のコードで確認しよう

    ハンバーガーメニューとはWebサイトを見ていると、右上などにメニュ…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP