1. 程式人生 > >網頁html隨機切換背景圖片

網頁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程式碼。
  <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>