html5+自动更换背景图片,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('');

//]]>

html5+自动更换背景图片,html 随机切换背景图片相关推荐

android自动切换图片,android-自动切换背景图片
因为好用,所以值得收藏. >>>> >>>>> 一.创建切换背景布局类 public class LaunchAppAnimatedBgRe ...
关于如何设置网页自动切换背景图片
这篇文章关于如何设置网页自动切换背景图片如何设置背景图片通过点击按钮来触发"切换背景图片"这个命令 ==重点== 如何在script里面改变网页的背景图片设置背景图片自动切换 ...
js 点击切换背景图片
您好,要使用JavaScript实现点击切换背景图片,可以按照以下步骤进行: 在HTML中,为需要切换背景图片的元素添加一个id属性,比如id="bg-img". 在JavaScr ...
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
前端实现滑动页面动态切换背景图片的炫酷效果
我发现好的网站都用了如下GIF的模块与背景图片切换的效果,这让在下心痒痒的,所以自己动手写了一遍发现蛮简单的,分享给大家! 思路说明: 首先我的思路是介个样子的:先让一个空的宽度高度都占满的div孩子 ...
javascript:点击小图片切换背景图片
屏幕部分图片,点击中间的小图片,会变换背景图片 html布局代码: <ul class="box"><li><img src="images ...
java添加背景图片_Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
java框体怎么添加背景图,文本框添加背景图片，文本框背景图片,public class
文本框添加背景图片,文本框背景图片,public classpublic class WatermarkTextField extends JTextField { BufferedImage img ...
java为文本框添加背景颜色,文本框添加背景图片，文本框背景图片,文本框添加水印[Java...
文本框添加背景图片,文本框背景图片,文本框添加水印[Java 文本框添加水印 [Java]代码public class WatermarkTextField extends JTextField { ...
OpenCV技巧 | 常用格式图片保存为透明背景图片(附Python源码)-教你轻松制作Logo
导读本文主要介绍使用OpenCV将常用格式图片保存为透明背景图片的方法与实现代码. 实现目标本文的目标有如下两个: ① 将常见格式[jpg/png/bmp]白色背景图片转换保存为透明背景图片: ② ...

html5+自动更换背景图片,html 随机切换背景图片

html5+自动更换背景图片,html 随机切换背景图片相关推荐

最新文章

热门文章