Kuroshio Ocean Design - 黑潮設計 - Powered by Discuz! Board

標題: [JavaScript] 隨機圖片 [打印本頁]

作者: kayin 時間: 2007-9-6 08:32 PM 標題: 隨機圖片

創建隨機圖片，這是利用隨機數所能做的最簡單的事了。此例中，我們假設有10張圖片，　　banner1.gif.....banner10.gif，每當文檔被載入時，我們希望能隨機地顯示這些圖片。

<script language="JavaScript"><!--
document.write('<img src="../images/banner' + rand(10) + '.gif" width=400 height=40>');
//--></script>

複製代碼

　　如果圖片不是以數字的形式來命名的，或者圖片的類型或大小不一樣時，那麼，你也可以通過檢查隨機數的值，然后顯示相應的圖片：

<script language="JavaScript"><!--
var number = rand(10);
if (number == 1) {
　var picture = "one.gif";var width = 400;var height = 40;
}
else if (number == 2) {
　var picture = "two.jpg";var width = 200;var height = 20;
}
...
...
else if (number == 9) {
　var picture = "nine.gif";var width = 450;var height = 450;
}
else if (number == 10) {
　var picture = "ten.jpg";var width = 40;var height = 400;
}
document.write('<img src="../images/' + picture + '" width=' + width + ' height=' + height + '>');
//--></script>

複製代碼

　　上面介紹了怎樣隨機顯示圖片，同樣的道理，也可以利用隨機數創建隨機的文本、表單、標題廣告、URL 、背景顏色和圖像、調查表和幀等等，這裡就不再多說了。

作者: kayin 時間: 2007-9-10 02:43 PM 標題: 隨機圖片輪播

輪播的原理其實跟隨機播放差不多，只是多用了個setInterval()函式而已。

<script type="text/javascript">
<!--
var myImg = new Array("m01.gif","m02.gif","m03.gif","m04.gif","m05.gif");
function showImg(){
//乘以陣列的長度以取得從0~(陣列長度-1)的數字
var imgIndex = Math.floor(Math.random()*myImg.length);
document.getElementById("my_div").innerHTML = "<img src='"+myImg[imgIndex]+"'>";
}
//設定每兩秒執行一次showImg()
setInterval("showImg()",2000);
-->
</script>

複製代碼

在JavaScript的部份，我只是把myImg陣列中的圖片換成比較可愛的男生圖，在showImg()函式中一樣沒做任何改變。
這邊要注意的是我用了setInterval("showImg()",2000);這個就是本次要教的重點。setInterval()函式需要帶入兩個參數，第一個是所要執行的函式，第二個是每隔幾毫秒要執行一次。所以這邊我們是設成每隔2000毫秒(2秒)就執行一次showImg()函式，醬就能做到N張圖片隨機輪播了。
有人問說：如何做到在N張圖片中選出M張來做隨機的輪播呢？
我們拿剛剛的範例來修改一下就能做到醬的效果了，在Body部份一樣是不用做修改，所以直接來看JavaScript吧！

<script type="text/javascript">
<!--
//共有幾張圖
var myImg = new Array("m01.gif","m02.gif","m03.gif","m04.gif","m05.gif");
//要取幾張來播放
var playImg = new Array(3);
//目前播放到第幾張
var nowIndex=0;
//從allImg中取出N張放到myImg裡面
for(var i=0;i<playImg.length;i++){
playImg[i] = myImg[Math.ceil(Math.random()*myImg.length-1)];
}
function showImg(){
document.getElementById("my_div").innerHTML = "<img src="+playImg[nowIndex]+">";
//若nowIndex+1後>=playImg的長度，nowIndex重0開始；否則加1
nowIndex = (nowIndex+1)>= playImg.length?0:nowIndex+1;
}
//設定每2秒執行一次showImg()
setInterval("showImg()",2000);
//-->
</script>

複製代碼

我多宣告了一個長度為3的playImg()陣列來存放選出來後的圖片，用nowIndex來紀錄目前是播放到playImg()陣列中的第幾個位置，接下來就是用for迴圈來從myImg()陣列中隨機選3張圖放到playImg()陣列中。到這裡應該都還不難理解吧。
因為要控制圖片能從第一張、第二張...醬子播放到最後一張時，能繼續回到第一張的循環播放，所以在指定nowIndex時要判斷nowIndex+1後是否大於等於playImg()陣列的長度。
不過若多重整幾次上面的範例時，不知道您有沒有發現到圖片並沒有變化，正確的說法應該是圖片重覆，所以看起來會覺得沒變化。會醬子是因為我們在從myImg()陣列中取圖放到playImg()陣列時，我們並沒有判斷圖片是否已經存在playImg()陣列中了，所以才會發生圖片有重覆的情況。
讓我們來修改一下Code做個重覆的檢驗吧。

//從allImg中取出N張放到myImg裡面
for(var i=0;i<playImg.length;i++){
playImg[i] = myImg[Math.ceil(Math.random()*myImg.length-1)];
for(var j=0;j<i;j++){
if(playImg[j]==playImg[i]) i--;
}
}

複製代碼

重覆的判斷只要寫在for迴圈中就行了，多個迴圈來把剛從myImg()陣列中取出的圖片跟playImg()陣列中的做比較。醬子改過就能做到N張取M張來輪播且圖片不會重覆囉。

範例一：

<HTML>
<HEAD>
<script type="text/javascript">
<!--
var myImg = new Array("m01.gif","m02.gif","m03.gif","m04.gif","m05.gif");
function showImg(){
//乘以陣列的長度以取得從0~(陣列長度-1)的數字
var imgIndex = Math.floor(Math.random()*myImg.length);
document.getElementById("my_div").innerHTML = "<img src='"+myImg[imgIndex]+"'>";
}
//設定每兩秒執行一次showImg()
setInterval("showImg()",2000);
-->
</script>
</HEAD><body onload="showImg();">
<div id="my_div"></div>
</body>
</HTML>

複製代碼

範例二：

<HTML>
<HEAD>
<script type="text/javascript">
<!--
//共有幾張圖
var myImg = new Array("m01.gif","m02.gif","m03.gif","m04.gif","m05.gif");
//要取幾張來播放
var playImg = new Array(3);
//目前播放到第幾張
var nowIndex=0;
//從allImg中取出N張放到myImg裡面
for(var i=0;i<playImg.length;i++){
playImg[i] = myImg[Math.ceil(Math.random()*myImg.length-1)];
} function showImg(){
document.getElementById("my_div").innerHTML = "<img src="+playImg[nowIndex]+">";
//若nowIndex+1後>=playImg的長度，nowIndex重0開始；否則加1
nowIndex = (nowIndex+1)>= playImg.length?0:nowIndex+1;
}
//設定每2秒執行一次showImg()
setInterval("showImg()",2000);
//-->
</script>
</HEAD><body onload="showImg();">
<div id="my_div"></div>
</body>

複製代碼

範例三：

<HTML>
<HEAD>
<script type="text/javascript">
<!--
//共有幾張圖
var myImg = new Array("m01.gif","m02.gif","m03.gif","m04.gif","m05.gif");
//要取幾張來播放
var playImg = new Array(3);
//目前播放到第幾張
var nowIndex=0;
//從allImg中取出N張放到myImg裡面
for(var i=0;i<playImg.length;i++){
playImg[i] = myImg[Math.ceil(Math.random()*myImg.length-1)];
for(var j=0;j<i;j++){
if(playImg[j]==playImg[i]) i--;
}
} function showImg(){
document.getElementById("my_div").innerHTML = "<img src="+playImg[nowIndex]+">";
//若nowIndex+1後>=playImg的長度，nowIndex重0開始；否則加1
nowIndex = (nowIndex+1)>= playImg.length?0:nowIndex+1;
}
//設定每2秒執行一次showImg()
setInterval("showImg()",2000);
//-->
</script>
</HEAD><body onload="showImg();">
<div id="my_div"></div>
</body>
</HTML>

複製代碼

範例四(此範例在圖片中加了超連結)：

<HTML>
<HEAD>
<script type="text/javascript">
<!--
//共有幾張圖
var myImg = new Array(["m01.gif","blog.xuite.net/abgne/diary1"],["m02.gif","blog.xuite.net/abgne/diary1"],["m03.gif","blog.xuite.net/abgne/diary1"],["m04.gif","blog.xuite.net/abgne/diary1"],["m05.gif","blog.xuite.net/abgne/diary1"]);
//要取幾張來播放
var playImg = new Array(3);
//目前播放到第幾張
var nowIndex=0;
//從allImg中取出N張放到myImg裡面
for(var i=0;i<playImg.length;i++){
playImg[i] = myImg[Math.ceil(Math.random()*myImg.length-1)];
for(var j=0;j<i;j++){
if(playImg[j]==playImg[i]) i--;
}
} function showImg(){
document.getElementById("my_div").innerHTML = "<A HREF='http://"+playImg[nowIndex][1]+"'><img src="+playImg[nowIndex][0]+" border='0'></a>";
//若nowIndex+1後>=playImg的長度，nowIndex重0開始；否則加1
nowIndex = (nowIndex+1)>= playImg.length?0:nowIndex+1;
}
//設定每2秒執行一次showImg()
setInterval("showImg()",2000);
//-->
</script>
</HEAD><body onload="showImg();">
<div id="my_div"></div>
</body>

複製代碼

歡迎光臨 Kuroshio Ocean Design - 黑潮設計 (http://forum.kod.tw/)