首先要有一個添加背景圖片的div

<div id="myDiv"></div>

css樣式中添加背景tu圖

body{height:100%;}

#myDiv{background-image:url("img/yellow.jpg");height:100%;} //註意添加的背景圖一定要設置具體的數值高度才會顯示，而這裏用100%是不可能顯示的，這就需要在這個div的父類元素（在這裏也就是body了）設置height：100%。然後再給它設100%。才是有效的。並且高度是全屏的。

js代碼：

var currentImg=Math.floor(Math.random()*3); //也就是讓currentImg取得0-3之間的隨機值，可以I等於,0和3，這個是用來取圖片的索引下標的。

var imgArr=[‘orange.jpg‘,‘green.jpg‘,‘yellow.jpg‘];//定義一個數組來存放所有的圖片

function changeImg(){

var img=document.getElementById("myDiv");

img.style.backgroundImage="url(img/"+img[currentImg]+")"; //這裏特別要註意引號的使用，因為img[curentImg]是個變量，所以用"+變量+"

}

最後執行這個函數就可以啦

changeImg();

上面就是每次打開頁面或者刷新的時候會隨機在三張圖片中選一個。

如果想要每隔一段時間換一個的話，只需把js修改成：

var currentImg=0; //這個是用來取圖片的索引下標的。

var imgArr=[‘orange.jpg‘,‘green.jpg‘,‘yellow.jpg‘];//定義一個數組來存放所有的圖片

function changeImg(){

if(currentImg>=imgArr.length){currentImg=0} //當圖片的索引超過圖片數量就從第一個開始

else{currentImg++;}

var img=document.getElementById("myDiv");

img.style.backgroundImage="url(img/"+img[currentImg]+")"; //這裏特別要註意引號的使用，因為img[curentImg]是個變量，所以用"+變量+"

}

後面執行時也有點不同需要用到setInterval

setInterval(changeImg,400);//每隔400ms就換一個

-------------------------------------

補充：

Math.random() 是（0 ，1）
Math.random()*3 是(0,3)
Math.random()*3+1 是(1,4)
Math.floor(Math.random()*3+1) 是[1,4] 可以等於1,4 Math.floor()是向下取整

所以這裏取圖片的索引有兩種寫法：1.var currentImg=Math.floor(Math.random()*3); 然後直接就取這個currentImg

2，讓他0開始加，加到和長度一樣或者比長度長時就又從0開始。

JS實現背景圖按時切換或者每次更新