注冊/登錄,歡迎光臨!
加入收藏設為首頁網站地圖
您當前的位置:辛勤IT網 >> 網頁設計 >> HTML >> HTML技術:如何在網頁中圖片的隨機顯示
熱門:word | excel | powerpoint

HTML技術:如何在網頁中圖片的隨機顯示

2013/1/4 11:24:22 所屬分類:網頁設計 - HTML
內容提要:HTML技術:如何在網頁中圖片的隨機顯示,圖片隨機顯示是一個應用非常廣泛的技巧。比如隨機banner的顯示,當你進入一個網站時它的banner總是不同的,或者總有內容不同的提示(tips),大家在網上瀏覽時會經常發現這樣的例子。

  圖片隨機顯示是一個應用非常廣泛的技巧。比如隨機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>

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

網頁設計 | HTML
最近更新
推薦信息
關于我們 | 聯系方式 | 對話本站 | 版權聲明 | 所有信息
福建体彩31选7走势图开奖7