博客园随机切换背景图，超简单教程

一、前言

二、准备工作

三、实现代码

四、结尾

一、前言

博客园做的还是挺强大的，很多东西都支持自定义，比较适合喜欢瞎捣鼓的小伙伴。之前写过一篇博客园看板娘的教程，有兴趣的小伙伴可以看一下：https://blog.csdn.net/Wjhsmart/article/details/107083930。今天给大家分享一下怎么样自动更换背景图片，实现原理很简单，利用JS的定时任务随机更换准备好的一些图库即可。

二、准备工作

要更新背景图片当然得先准备好一些图库来了，博客园支持自定义上传一些喜欢的背景图片，大家可以先把自己喜欢的背景图都先上传到博客园中。找到设置-相册，新建一个相册，然后上传图片。

三、实现代码

图片上传完了之后将以下代码追加到博客园的自定义JS当中。记得把图片路径换成自己的路径哦。

<script type="text/javascript">
var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径
bodyBgs[0] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516065.jpg";
bodyBgs[1] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516333.jpg";
bodyBgs[2] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516461.jpg";
bodyBgs[3] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005302120.jpg";
bodyBgs[4] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005393260.jpg";
bodyBgs[5] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300530559.jpg";
bodyBgs[6] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005310729.jpg";
bodyBgs[7] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005312666.jpg";
bodyBgs[8] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_200730055501158.jpg";var int=self.setInterval("clock()",10000);
function clock()
{
var randomBgIndex = Math.round( Math.random() * 8 );
document.body.style.background = "url("+bodyBgs[randomBgIndex]+") fixed";
}</script>

最后别忘记了点最下面的保存哦

如果想设置默认图片，只需要把下面代码追加到CSS的后面。

#home {
opacity: 0.70;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516461.jpg
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

opacity：是设置透明度的

background：url中的地址换成自己的地址即可

四、结尾

怎么样？是不是超级简单，小伙伴们有没有学会呢？听说好看的小哥哥，小姐姐看完文章都会给博主点个小小的赞哦，你点赞了吗^_^

想看更多博主的精彩好文，请移步：http://wjhsmart.vip。有自己建站的小伙伴还可以联系博主互联哦。