網頁html隨機切換背景圖片

1. 首先要準備一些圖像，圖像的大小（不管是尺寸大小仍是數據大小）要控制好，若是太大，會使用戶等不及查看全圖就跳出了，若是過小，又會影響頁面質量。

2. 在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";

1. 由於上面用到了5個圖像，因此在這裏須要產生一個0到4的隨機數。若是數組長度不同，修改下面代碼中的乘數就能夠。

var randomBgIndex = Math.round( Math.random() * 4 );

1. 核心的程序就是這些。儘管很簡單，倒是一種小小的思路，若以此爲基礎，經過加工能夠作出一些擴展功能。好比：主題切換以及其它的隨機呈現等等。下面是完整的JS代碼。

http://www.9958.pw/post/html_backimage_random <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>