当前位置:记磊博客 > 技巧-源码 > 正文

作者:记磊博客

比较忧愁,比较善感,比较孩子气,比较喜欢网络技术的小子

手机扫码查看

用代码实现刷新网页都随机变换背景图片,不调用API接口

摘要:不借助任何第三方随机图片api接口,每次刷新网站都可以随机显示自己喜欢的背景图片

用代码实现刷新网页都随机变换背景图片,不调用API接口
现在网上有很多随机图片api接口,使用那些接口就可以快速的给网站添加随机背景图功能。但是实际使用时我们会发现一个非常糟糕的状况:图库中有很多我们不喜欢的图片,而且也无法控制显示哪些图、不显示哪些图。

代码作用不借助任何第三方随机图片api接口,每次刷新网站都可以随机显示自己喜欢的背景图片。

代码展示:

<script type="text/javascript">
//<!CDATA[
var bodyBgs = [];
bodyBgs[0] = "https://ws3.sinaimg.cn/large/9660f996gy1frcygqon36j21hc0u0qb3";
bodyBgs[1] = "https://ws3.sinaimg.cn/large/9660f996gy1frd0kw0v8fj21hc0u07wh";
bodyBgs[2] = "https://ws3.sinaimg.cn/large/9660f996gy1frd0kq3giaj21hc0ushdt";
bodyBgs[3] = "https://ws3.sinaimg.cn/large/9660f996gy1frcygowxekj21hc0u049k";
bodyBgs[4] = "https://ws3.sinaimg.cn/large/9660f996gy1frbrjd2syoj21hc0u0wjv";
bodyBgs[5] = "https://ws3.sinaimg.cn/large/9660f996gy1frd0iuro9zj21hc0u0txl";
bodyBgs[6] = "https://ws3.sinaimg.cn/large/9660f996gy1frczgdgqk4j21hc0u0tiz";
bodyBgs[7] = "https://ws3.sinaimg.cn/large/9660f996gy1frcyg1j2nfj21hc0u0qoq";
bodyBgs[8] = "https://ws3.sinaimg.cn/large/9660f996gy1frbrj7t9p9j21hc0u0q66";
bodyBgs[9] = "https://ws3.sinaimg.cn/large/9660f996gy1frd0l5gfawj21hc0u07p3";
bodyBgs[10] = "https://ws3.sinaimg.cn/large/9660f996gy1frbql45skhj21hc0u078g";
bodyBgs[11] = "https://ws3.sinaimg.cn/large/9660f996gy1frd0gv4tj9j21hc0xcqv5";
bodyBgs[12] = "https://ws3.sinaimg.cn/large/9660f996gy1frbql6x8u0j21hc0u0gor";
bodyBgs[13] = "https://ws3.sinaimg.cn/large/9660f996gy1frbqld3dm8j21hc0u078f";
bodyBgs[14] = "https://ws3.sinaimg.cn/large/9660f996gy1frbqla2pyrj21hc0u0n3m";
bodyBgs[15] = "https://ws3.sinaimg.cn/large/9660f996gy1frd12p3kugj21hc0u0hax";
bodyBgs[16] = "https://ws3.sinaimg.cn/large/9660f996gy1frbql7sjtbj21hc0u0wjw";
bodyBgs[17] = "https://ws3.sinaimg.cn/large/9660f996gy1frbql5fsalj21hc0u0gsg";
bodyBgs[18] = "https://ws3.sinaimg.cn/large/9660f996gy1frd14o6rrgj21hc0u07j4";
bodyBgs[19] = "https://ws3.sinaimg.cn/large/9660f996gy1frd0k83jp3j21hc0u04mp";
//您可以继续增加图片,格式可参考上面的
var randomBgIndex = Math.round( Math.random() * 20); //删减图片后记得修改这个数字为真实的图片数量
document.write('</p>
<style><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}</style>
<p>');
//]]>
</script>

食用方法

把代码粘贴到您网站全局公共页脚文件里(一般为 foot.php 或 footer.php ), 前;可以自己修改图片地址,也可以删减图片,修改后记得修改 var randomBgIndex = Math.round( Math.random() * 20 ); 这段代码中20为实际图片数量。

代码来自帖子网,有删改

 您阅读这篇文章共花了:

记磊博客文章说明:

作者:记磊博客, 转载或复制请以 超链接形式 并注明出处 记磊博客
原文地址:https://www.ly522.com/1712.html 发布于2018-08-19。
如果我的文章帮助到了你,或者给你产生了些许spark ,欢迎(-(赞助打赏)-)

分享到:
赞(2) 打赏

评论-加入了一言 抢沙发

7 + 5 =


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

时光里的点滴

应广大网友需求记磊工具箱源码需求,开通交流群, 目前禁言。资源已经上传。群稳定后开放

快速加群

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录