DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現網頁隨機切換背景圖片的方法教程
js實現網頁隨機切換背景圖片的方法教程
編輯:關於JavaScript     

本文實例講述了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代碼。

代碼如下:<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>

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved