HTML中如何自动切换页面背景图片

来源:互联网 发布:刷贴软件 编辑:程序博客网 时间:2024/05/21 19:43

附js主要代码:

一、切换body图片

 <script type="text/javascript">
var curIndex = 0;
//时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下
var timeInterval = 1000;

                        //定义一个存放照片位置的数组,可以放任意个,在这里放3个
var arr = new Array();
arr[0] = "img/1.jpg";
arr[1] = "img/2.jpg";
arr[2] = "img/3.jpg";
setInterval(changeImg, timeInterval);
function changeImg() {
if (curIndex == arr.length - 1) {
curIndex = 0;
} else {
curIndex += 1;
}

                                  //设置body的背景图片
document.body.style.backgroundImage = "URL("+arr[curIndex]+")";  //显示对应的图片
}
</script>


二、切换div背景

<script type="text/javascript">
var curIndex = 0;
//时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下。
var timeInterval = 1000;

                        //定义一个存放照片位置的数组,可以放任意个,在这里放3个
var arr = new Array();
arr[0] = "img/1.jpg";
arr[1] = "img/2.jpg";
arr[2] = "img/3.jpg";
setInterval(changeImg, timeInterval);
function changeImg() {

                                //获得id名为d1的对象
var obj = document.getElementById("d1");
if (curIndex == arr.length - 1) {
curIndex = 0;
} else {
curIndex += 1;
}
                        //设置d1的背景图片
obj.style.backgroundImage= "URL("+arr[curIndex]+")";       //显示对应的图片
}
</script>