<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0} body{background: #dddddd} #div1{ width: 100%; height: 100%; } </style> </head> <body id="div1" onload="showBgImage()"> </body> </html> <script> function showBgImage() { var curIndex = 0; //定义开始索引 var timeInterval = 1000; //定义切换时间， 1s=1000ms //定义存放图片数组 var arr = new Array(); arr[0] = "images/240.png"; //给数组每一项赋值，就是添加图片路劲 arr[1] = "images/340.png"; arr[2] = "images/240.png"; arr[3] = "images/340.png"; arr[4] = "images/240.png"; arr[5] = "images/340.png"; setInterval(changeImg, timeInterval); //调用显示图片方法（参数为：方法名和切换时间） function changeImg() { var obj = document.getElementById("div1"); //获得所要设置的元素 if (curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } obj.style.backgroundImage = "url(" + arr[curIndex] + ")"; //设置获得元素的背景图片 } } </script>