網頁中圖片的隨機顯示

　　 

    圖片隨機顯示是一個應用非常廣泛的技巧。比如隨機banner的顯示，當你進入一個網站時它的banner總是不同的，或者總有內容不同的提示（tips），大家在網上瀏覽時會經常發現這樣的例子。

使用這種技術，不但能在一定的空間里放入更多的內容，還可以給人一種經常更新的假象喔。

    怎么樣心動了吧？其實只要你有一點點html和javascript 的基礎，一切都是這么簡單。follow me，讓我們來看看她隨機的奧密。

    讓我們從一個簡單的例子開始吧。平常我們在頁面中加入圖片都是用<img src="圖片">來完成。如果我們要隨機顯示3張不同的圖片就要對這句代碼進行小小的修改，首先加入<script>標記：<script language=javascript></script>然后在這段標記內把<img src="圖片">用document.write（""）的型式放進去，就成了document.write（"<img src=圖片>"）

    現在我們來完成最關建的一段：id=Math.round（Math.random（）*2）+1這樣取得隨機數為1，2，3將你要顯示的圖片改名為1.gif，2.gif，3.gif，ok！最后的代碼是：<script language=javascript> id=Math.round（Math.random（）*2）+1 document.write（"<img src="+id+".gif>"）

    </script>試一下，是不是不錯？那如果我的每一張圖片都對應了一個超鏈接該怎么辦呢？

    我們還是來假設一下有3張圖片，1.gif，2.gif，3.gif，分別對應的鏈接是url1，url2，url3.為了讓圖片和鏈接一一對應，我們要設置一個數組image來放置鏈接的地址，如下：var image=new Array（3）

    image.length=3 image
="url1" image="url2" image="url3"為了將與圖片對應的鏈接取出來，我們還要定義一個數組imageurl=image[id]原理是這樣的：當頁面被讀入時，取一個隨機數，假設是2即id=2，那么如上我們可輕松的完成2.gif在頁面的顯示。然后我們可以看到：imageurl=image而image="url2"，剩下的事就好辦了。完整的代碼如下：<script language=javascript> var image=new Array（3）

    image.length=3 image
="url1" image="url2" image="url3" id=Math.round（Math.random（）*2）+1 imageurl=image[id] document.write（"<a href="+bannerurl+">"+"<img src="+id+".gif>"）

    </script>這只是一個簡單的例子，還有許多的功能可以實現，比如，設定圖片的顯示機率等。

原文轉自：http://www.kjueaiud.com