JS實現(xiàn)頁面載入時隨機顯示圖片效果
更新時間：2016年09月07日 15:26:59 作者：onestopweb
這篇文章主要介紹了JS實現(xiàn)頁面載入時隨機顯示圖片效果,涉及javascript基于隨機數(shù)與數(shù)組的頁面元素動態(tài)修改相關操作技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)頁面載入時隨機顯示圖片效果。分享給大家供大家參考，具體如下：
<html>
<head>
<title>JS 隨機圖片效果</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)測試可以正常運行。這里就不再配上運行效果圖了，感興趣的朋友可以挑幾張美女圖片測試一下看看效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript遍歷算法與技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:
- 基于JavaScript代碼實現(xiàn)隨機漂浮圖片廣告
- JSP隨機驗證圖片如何制作
- javascript隨機顯示背景圖片的方法
- JavaScript實現(xiàn)隨機替換圖片的方法
- js鼠標點擊圖片實現(xiàn)隨機變換圖片的方法
- js實現(xiàn)網(wǎng)頁隨機切換背景圖片的方法
- javascript隨機將第一個dom中的圖片添加到第二個div中示例
- js 圖片隨機不定向浮動的實現(xiàn)代碼
- JavaScript 創(chuàng)建隨機數(shù)和隨機圖片
- javascript 隨機廣告代碼(圖片廣告)
- JS實現(xiàn)鼠標移動到縮略圖顯示大圖的圖片放大效果
- 圖片上傳即時顯示縮略圖的js代碼
相關文章
需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫，但是具體幾組數(shù)據(jù)不確定，有客戶來填寫，所以，這里我用JS進行添加刪除子方案，并要對方案輸入的正確性加以判斷，感興趣的朋友可以了解下2013-04-04
這篇文章主要介紹了JavaScript設計模式之模板方法模式原理與用法,結合實例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關操作技巧與注意事項,需要的朋友可以參考下2018-08-08
本文主要介紹了JavaScript制作游戲搖桿方向盤,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2014-04-04
一篇文章告訴你如何用事件委托實現(xiàn)JavaScript留言板功能
這篇文章主要為大家介紹了事件委托實現(xiàn)JavaScript留言板功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
JavaScript求一組數(shù)的最小公倍數(shù)和最大公約數(shù)常用算法詳解【面向對象，回歸迭代和循環(huán)】
這篇文章主要介紹了JavaScript求一組數(shù)的最小公倍數(shù)和最大公約數(shù)常用算法,結合實例形式分析了javascript基于面向對象，回歸迭代和循環(huán)等算法求解一組數(shù)的最小公倍數(shù)與最大公約數(shù)相關操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JS+CSS實現(xiàn)DIV層的展開、收縮效果，以兩個完整實例介紹了JS控制DIV層的展開、收縮效果，感興趣的小伙伴們可以參考一下2016-01-01
在油價高企的今天,了解自己愛車的真實油耗情況對每位車主來說都至關重要,本文將介紹一個簡單實用的油耗計算方法,并提供一個可以直接使用的HTML油耗計算器,本文提供的油耗計算器簡單易用,無需安裝任何軟件,在任何有瀏覽器的設備上都可以使用,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了JavaScript 閉包機制詳解及實例代碼的相關資料,需要的朋友可以參考下2016-10-10
js字符串轉換成數(shù)字與數(shù)字轉換成字符串的實現(xiàn)方法
本篇文章主要是對js字符串轉換成數(shù)字與數(shù)字轉換成字符串的實現(xiàn)方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了Javascript如何遞歸遍歷本地文件夾，文中代碼非常細致，幫助大家更好的理解和學習JavaScript遞歸，感興趣的朋友可以了解下2020-08-08