THE HAM MEDIA BLOG

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

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

プレビュー

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

◆ソース（初期画像部分）

$(function(){
    var len = 4;
    var arr = new Array(
        "https://h2ham.up.seesaa.net/image/200808071.jpg", 
        "https://h2ham.up.seesaa.net/image/200808072.jpg", 
        "https://h2ham.up.seesaa.net/image/200808073.jpg", 
        "https://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(
        "https://h2ham.up.seesaa.net/image/200808071.jpg", 
        "https://h2ham.up.seesaa.net/image/200808072.jpg", 
        "https://h2ham.up.seesaa.net/image/200808073.jpg", 
        "https://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の数字にする為に使うものです。
ここで指定した数字ー１の数が乱数として発生することになります。

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