js實現(xiàn)網(wǎng)頁隨機切換背景圖片的方法
更新時間：2014年11月01日 09:26:24 投稿：shichen2014
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁隨機切換背景圖片的方法,涉及數(shù)組、隨機函數(shù)與css樣式的調(diào)用技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)網(wǎng)頁隨機切換背景圖片的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
首先要準備一些圖像，圖像的大?。o論是尺寸大小還是數(shù)據(jù)大小）要控制好，如果太大，會使用戶等不及查看全圖就跳出了，如果太小，又會影響頁面質(zhì)量
在script中將這些圖像編為一個數(shù)組，便于調(diào)用。數(shù)組的長度當然就是圖像的數(shù)量。
復制代碼 代碼如下:
var bodyBgs = []; //創(chuàng)建一個數(shù)組變量來存儲背景圖片的路徑
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
因為上面用到了5個圖像，所以在這里需要產(chǎn)生一個0到4的隨機數(shù)。如果數(shù)組長度不一樣，修改下面代碼中的乘數(shù)就可以。
復制代碼 代碼如下:
var randomBgIndex = Math.round( Math.random() * 4 );
核心的程序就是這些。盡管很簡單，卻是一種小小的思路，若以此為基礎，通過加工可以做出一些擴展功能。比如：主題切換以及其它的隨機呈現(xiàn)等等。下面是完整的JS代碼。
復制代碼 代碼如下:
<script type="text/javascript">
//<!CDATA[
var bodyBgs = [];
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
var randomBgIndex = Math.round( Math.random() * 4 );
//輸出隨機的背景圖
document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');
//]]>
</script>
//<!CDATA[
var bodyBgs = [];
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
var randomBgIndex = Math.round( Math.random() * 4 );
//輸出隨機的背景圖
document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');
//]]>
</script>
希望本文所述對大家基于javascript的web程序設計有所幫助。
相關(guān)文章
非?？岬膉avascript拖動分頁功能，無縫循環(huán)分頁，拖動鼠標即可完成分頁，鼠標向左拖動回到前一頁，向右拖動則翻開第二頁，還帶有動畫特效，著實很不錯，界面黑色，非主流風格，相信很多人會喜歡的。2015-05-05
在Web開發(fā)中,處理日期和時間是常見的需求之一,特別是在金融、人力資源等領(lǐng)域,經(jīng)常需要計算特定的日期范圍或工作日,本文將深入探討如何使用JavaScript計算當前時間前N個工作日,并提供詳細的代碼示例和實際開發(fā)中的技巧,需要的朋友可以參考下2025-02-02
這篇文章主要給大家介紹了關(guān)于前端項目部署后如何提示用戶版本更新的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的工作或者學習具有一定的參考借鑒價值,需要的朋友可以參考下2024-03-03
本文主要介紹了JavaScript獲取URL參數(shù)的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
Bootstrap carousel輪轉(zhuǎn)圖的使用實例詳解
圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。這篇文章主要給大家介紹Bootstrap carousel輪轉(zhuǎn)圖的使用實例詳解，需要的朋友可以參考下2016-05-05
本文通過實例代碼給大家介紹了微信小程序的注冊頁面包含倒計時驗證碼、獲取用戶信息的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2019-05-05
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系2007-12-12
JavaScript中call、apply、bind實現(xiàn)原理詳解
其實在很多文章都會寫call，apply，bind,但個人覺著如果不弄懂原理,是很難理解透的,所以這篇文章主要介紹了JavaScript中call、apply、bind實現(xiàn)原理的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了JavaScript中return用法,結(jié)合實例形式簡單分析了javascript中return語句的功能與使用技巧,需要的朋友可以參考下2016-11-11
String 的擴展方法集合，可以是javascript對string的功能更多2008-06-06