html模版自动切换背景,html 随机切换背景图片

因为新的Homepage老用一个背景图片太过于单一，所以准备随机切换背景图片，动手制作一个js脚本

1、准备好需要切换的图片，不要太大也不要太小，太大会加载缓慢，太小会影响质量，可以用https://tinypng.com/压缩一下

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";

3、因为上面用到了5个图像，所以在这里需要产生一个0到4的随机数。如果数组长度不一样，修改下面代码中的乘数就可以。var randomBgIndex = Math.round( Math.random() * 4 );

下面为完整代码：

//

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('');

//]]>