JS實(shí)現(xiàn)頁面載入時(shí)隨機(jī)顯示圖片效果
本文實(shí)例講述了JS實(shí)現(xiàn)頁面載入時(shí)隨機(jī)顯示圖片效果。分享給大家供大家參考,具體如下:
<html> <head> <title>JS 隨機(jī)圖片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { border: #999999; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} --> </style> </head> <SCRIPT LANGUAGE="JavaScript"> var rand1 = 0; var useRand = 0; images = new Array; images[1] = new Image(); images[1].src = "img/a1.jpg"; images[2] = new Image(); images[2].src = "img/a2.jpg"; images[3] = new Image(); images[3].src = "img/a3.jpg"; images[4] = new Image(); images[4].src = "img/a4.jpg"; function swapPic() { var imgnum = images.length - 1; do { var randnum = Math.random(); rand1 = Math.round((imgnum - 1) * randnum) + 1; } while (rand1 == useRand); useRand = rand1; document.randimg.src = images[useRand].src; } </script> <body bgcolor="#FFFFFF" text="#000000" OnLoad="swapPic()"> <img name="randimg" src="img/a1.jpg"> </body> </html>
代碼經(jīng)測試可以正常運(yùn)行。這里就不再配上運(yùn)行效果圖了,感興趣的朋友可以挑幾張美女圖片測試一下看看效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- 基于JavaScript代碼實(shí)現(xiàn)隨機(jī)漂浮圖片廣告
- JSP隨機(jī)驗(yàn)證圖片如何制作
- javascript隨機(jī)顯示背景圖片的方法
- JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法
- js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法
- js實(shí)現(xiàn)網(wǎng)頁隨機(jī)切換背景圖片的方法
- javascript隨機(jī)將第一個(gè)dom中的圖片添加到第二個(gè)div中示例
- js 圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼
- JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
- javascript 隨機(jī)廣告代碼(圖片廣告)
- JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
- 圖片上傳即時(shí)顯示縮略圖的js代碼
相關(guān)文章
js實(shí)現(xiàn)for循環(huán)跳過undefined值示例
這篇文章主要介紹了js實(shí)現(xiàn)for循環(huán)跳過undefined值,結(jié)合實(shí)例形式分析了js使用for循環(huán)針對數(shù)組的遍歷、判斷、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-07-07淺談javascript事件環(huán)微任務(wù)和宏任務(wù)隊(duì)列原理
這篇文章主要介紹了javascript事件環(huán) 微任務(wù)和宏任務(wù)隊(duì)列原理,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09基于JavaScript+HTML編寫一個(gè)日期選擇插件
在現(xiàn)代Web應(yīng)用程序中,日期選擇器是一個(gè)非常常見的組件,用戶可以使用它來選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來創(chuàng)建一個(gè)簡單但功能強(qiáng)大的日期選擇插件,這個(gè)日期選擇插件是比較考驗(yàn)Js基本功的,需要的朋友可以參考下2023-10-10