用Javascript插入隨機圖片

目前部落格模板新增Banner,我為了以後可以新增其他圖片,做了隨機選圖的JS

這Code是我之前在看某動畫HP的時候發現的,他利用隨機數來操控圖片輸出

var imgnumber = Math.floor(Math.random()*4)+1; 
document.write(
    "<a href='../index.html'><img src='../img/img_left" + imgnumber + ".jpg'/></a>"
);

首先用"var"來定義一個名叫imgnumber的變數,將"Math.floor(Math.random()*4)+1"這個字串的結果指定給imgnumber

"Math.floor(Math.random()*4)+1"的意思是先執行Math.random()函數算出一個0~3的數字之後+1,也就是1~4的數字

然後再對html插入前面的字串

"<a href='../index.html'><img src='../img/img_left"

接著在他後面加上先前定義好的變數,然後補上剩下的字串

".jpg'/></a>"

這樣一來,如果變數是1的話,我的html就被插入了這樣的語句

<a href='../index.html'><img src='../img/img_left1.jpg'/></a>

那如果圖片位址不是連號怎麼辦?只要用switch切換選項就可以了

我們一樣先定義兩個變數,一個是隨機變數,另一個是判斷後的結果

var imgnumber = Math.floor(Math.random()*3)+1; //初始化隨機變數
var imgurl = 0; //初始化變數(歸零)

switch(imgnumber){ //開始做判斷
    case 1:
        imgurl = "http://www.aaa.com/aaa.jpg";
        break; //提早結束判斷式
    case 2:
        imgurl = "http://www.bbb.com/bbb.jpg";
        break; //提早結束判斷式
    case 3:
        imgurl = "http://www.ccc.com/ccc.jpg";
}
document.write("<img src='" + imgurl + "'/>");

SkyArrow提供了另一個更好的方法

var imgnumber = Math.floor(Math.random()*3);
var imgurl = [
    'http://www.aaa.com/aaa.jpg',
    'http://www.bbb.com/bbb.jpg',
    'http://www.ccc.com/ccc.jpg'
];
document.write('<img src="'+imgurl[imgnumber]+'">');

將所有的圖片網址塞進一個名為imgurl的陣列裡面,然後用隨機數字指定陣列位置取得網址

這樣可以省去一一判斷的時間,也可以精簡程式碼

但要注意的是,陣列的內容定義上是從0開始的,所以隨機數字必須要拿掉"+1",讓他產生0~2的數字

陣列內容要這樣呼叫

imgurl[0] //第一個
imgurl[1] //第二個
imgurl[2] //第三個

留言

  1. switch改用陣列可以更省程式碼

    var imgnumber = Math.floor(Math.random()*3);
    var imgurl = ['http://www.aaa.com/aaa.jpg', 'http://www.bbb.com/bbb.jpg', 'http://www.ccc.com/ccc.jpg';
    document.write('');

    其實我之前就寫了個隨機圖片的JS,只是一直沒釋出XD

  2. 好實用的Javascript!... {AwA}
    有機會試試用在bog裡 {-w-}

粗體斜體刪除線連結引用圖片程式碼

注意:您的電子信箱將不會被公開,且網站連結不會被搜尋引擎採計

{124} {123} {122} {121} {120} {119} {118} {117} {116} {115} {114} {113} {112} {111} {100} {025} {024} {023} {022} {021} {020} {019} {018} {017} {016} {015} {014} {013} {012} {011} {010} {009} {008} {007} {006} {005} {004} {003} {002} {001}