不使用任何第三方api接口,每次刷新网页都随机变换背景图片
in 各种技术 with 2 comments

不使用任何第三方api接口,每次刷新网页都随机变换背景图片

in 各种技术 with 2 comments

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

为了解决这一尴尬的状况,帖子网专门写了一段代码来实现自定义随机背景图,您可以自己控制需要显示哪些图片,自己添加喜欢的图片到图库,每次刷新网页时都能看到自己喜欢的图片,简直爽爽哒。

本代码主要作用

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

效果演示

目前过云梯那边用的就是这种方式:http://www.guoyunti.net

www.guoyunti.com.jpeg

完整代码

<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); //删减图片后记得修改这个数字为真实的图片数量
    //输出随机的背景图
    //免费图床地址:http://yuntuchuang.com
        document.write('<style>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>');
    //]]>
</script>

使用方法

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

个人建议

建议把图片上传到图床(推荐使用:云图床):http://yuntuchuang.com ,这样会提高您网站的加载速度。

给大家推荐一个优质的壁纸平台:2006壁纸网 - http://bizhi.2006.xyz , 这里总会有几张让您一眼就喜欢上的壁纸。

相关推荐

《使用PHP每日自动抓取Bing每日图像并保存到本地,附源码》

《网站随机背景图片api调用接口,让网站每次刷新都变换为不同的背景图片》

《专注且干净的壁纸下载网站,支持下载4K壁纸》

版权说明

本文及代码属本站原创,转载必须注明出处!

Responses
  1. 终于找到了,找了两三天这种,终于可以用自己喜欢的图片做背景了,感谢博主

    Reply
  2. 感谢分享。

    Reply