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)方法如下：
首先要準備一些圖像，圖像的大小（無論是尺寸大小還是數(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 );
核心的程序就是這些。盡管很簡單，卻是一種小小的思路，若以此為基礎(chǔ)，通過加工可以做出一些擴展功能。比如：主題切換以及其它的隨機呈現(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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)的tab切換選項卡效果,結(jié)合具體實例形式分析了JS通過鼠標事件觸發(fā)自定義函數(shù)控制頁面元素樣式變換實現(xiàn)tab切換功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-02-02
在日常開發(fā)中，很多時候會不經(jīng)意間寫出符合某種設(shè)計模式的代碼，而適配器其實在JavaScript中應(yīng)該是比較常見的一種了。這篇文章主要介紹了適配器在JavaScript中的體現(xiàn) ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了JavaScript中的this原理及6種常見使用場景詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動態(tài)和交互式網(wǎng)頁的技術(shù),它的主要優(yōu)勢在于能夠在不刷新整個網(wǎng)頁的情況下與服務(wù)器進行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見Ajax下載文件方式以及報錯解決辦法的相關(guān)資料,需要的朋友可以參考下2024-01-01
JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力以及其他特點，使JavaScript成為非常適合函數(shù)式編程的編程語言之一，這篇文章主要介紹了如何在JavaScript中使用高階函數(shù),需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了如何通過D3.js實現(xiàn)繪制柱狀圖，文中的示例代碼講解詳細，對我們學習D3.js有一定的幫助，需要的可以參考一下2022-11-11
這篇文章主要為大家詳細介紹了用純JS實現(xiàn)二級菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
微信小程序?qū)崿F(xiàn)手機獲取驗證碼倒計時60s
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)手機獲取驗證碼后倒計時60s，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了如何在CocosCreator里畫個炫酷的雷達圖，對Graphics感興趣的同學，一定要看看，并且把代碼實踐一下2021-04-04
jQuery實現(xiàn)為控件添加水印文字效果(附源碼)
這篇文章主要介紹了jQuery實現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下2015-12-12