首頁 > web前端 > js教程 > js實作網頁隨機切換背景圖片的方法_javascript技巧

js實作網頁隨機切換背景圖片的方法_javascript技巧

WBOY
發布: 2016-05-16 16:32:20
原創
2307 人瀏覽過

本文實例講述了js實現網頁隨機切換背景圖片的方法。分享給大家供大家參考。具體實作方法如下:

首先要準備一些圖像,圖像的大小(無論是尺寸大小還是數據大小)要控制好,如果太大,會使用戶等不及查看全圖就跳出了,如果太小,又會影響頁面質量

在script中將這些圖像編為一個數組,以便於呼叫。數組的長度當然就是圖像的數量。

複製程式碼 程式碼如下:
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";

因為上面用到了5個圖像,所以在這裡需要產生一個0到4的隨機數。如果數組長度不一樣,修改下面程式碼中的乘數就可以。

複製程式碼 程式碼如下:
var randomBgIndex = Math.round( Math.random() * 4 ) ;

核心的程式就是這些。儘管很簡單,卻是一種小小的思路,若以此為基礎,透過加工可以做出一些擴充功能。例如:主題切換以及其它的隨機呈現等等。下面是完整的JS程式碼。

複製程式碼 程式碼如下:

希望本文所述對大家基於javascript的web程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板