THE HAM MEDIA BLOG

画像をランダムに切り替えるスクリプトを考える

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
random
乱数
javascript
jquery

画像をランダムに切り替えるスクリプトを考える

画像をランダムに切り替えるのって、
どうやるんだろう?ってことで調べてみた。

そして今回もいつものようにjQueryを使って作ってみます。

プレビュー

JavaScriptで乱数を扱うときは、Math.random()を使う。
Math.floorは小数点以下切り捨ての処理を行う関数で、
今回はそれらを使います。

◆ソース(初期画像部分)

$(function(){
    var len = 4;
    var arr = new Array(
        "http://h2ham.up.seesaa.net/image/200808071.jpg", 
        "http://h2ham.up.seesaa.net/image/200808072.jpg", 
        "http://h2ham.up.seesaa.net/image/200808073.jpg", 
        "http://h2ham.up.seesaa.net/image/200808074.jpg"
        );
    var rand = Math.floor( Math.random() * len);
    $("div.preview img").attr("src",arr[rand]);
    $("div.preview a").attr("href",arr[rand]);
});

◆ソース(ボタン部分)

$(function(){
    $("div.preview button").click(function(){
    var len = 4;
    var arr = new Array(
        "http://h2ham.up.seesaa.net/image/200808071.jpg", 
        "http://h2ham.up.seesaa.net/image/200808072.jpg", 
        "http://h2ham.up.seesaa.net/image/200808073.jpg", 
        "http://h2ham.up.seesaa.net/image/200808074.jpg"
        );
    var rand = Math.floor( Math.random() * len);
    $("div.preview img").attr("src",arr[rand]);
    $("div.preview a").attr("href",arr[rand]);
    });
    return true;
});

◆プレビュー

チェンジのボタンを押すと、画像がランダムに変化します。
押しても変わらないときは、同じ画像を指し示しています。

var len = 4;としている部分は、
乱数を発生させたあと0〜3の数字にする為に使うものです。
ここで指定した数字ー1の数が乱数として発生することになります。

これでランダムに画像を表示することができました。
画像じゃなくても、文字でも応用できると思います。

トップ画のソース

乘涼犬
Photographer
*嘟*
License
Creative Commons (by)
Tool for photo selecting
Gigazinize Tools - Image

利用画像のソース

"Hey Baby!" *wink*  *slurp*
Photographer
Rentahamster
License
Creative Commons (by-nc-sa)
Tool for photo selecting
Gigazinize Tools - Image
Pug on Couch
Photographer
Dunechaser
License
Creative Commons (by-nc-sa)
Tool for photo selecting
Gigazinize Tools - Image
Mommy, come back early, please!
Photographer
tanakawho
License
Creative Commons (by)
Tool for photo selecting
Gigazinize Tools - Image
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。