網頁特效:圖片隨機顯示技巧

來源:互聯網
上載者:User
技巧|隨機|網頁|網頁特效|顯示

圖片隨機顯示是一個應用非常廣泛的技巧。比如隨機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[1]="url1"
image[2]="url2"
image[3]="url3" 


為了將與圖片對應的連結取出來,我們還要定義一個數組imageurl=image[id]
原理是這樣的:
當頁面被讀入時,取一個隨機數,假設是2即id=2,那麼如上我們可輕鬆的完成2.gif在頁面的顯示。然後我們可以看到:imageurl=image[2]而image[2]="url2",剩下的事就好辦了。完整的代碼如下:

以下是引用片段:
<script language=javascript>
var image=new Array(3)
image.length=3
image[1]="url1"
image[2]="url2"
image[3]="url3"
id=Math.round(Math.random()*2)+1
imageurl=image[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>


轉自:七色鳥設計---pc-king



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。