【WordPress 教程】用代码实现刷新网页都随机变换背景图片不调用API接口

2019年6月21日21:53:29 9 4,652
摘要

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

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

【代码展示】

  • 代码中展示的为链接地址也可以改成本地比如
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";
此处为隐藏的内容!
发表评论并刷新,方可查看

【食用方法】

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

【定时循环随机背景图】

  • 上面介绍的是每次网站刷新都会随机一张图片下面介绍一个
  • javascript实现background 定时循环随机背景图

案例1 - 采用API接口

<script type="text/javascript">
setInterval('Getbg();', 2000);
function Getbg(){
  var randomBgIndex = Math.round( Math.random() * 166 );
  //输出随机的背景图
  document.body.style.background="#9E9E9E url(https://acg.7585.net.cn/acg?"+randomBgIndex+") no-repeat ";
}
</script>
  • 利用API接口实现,第二行的2000是切换时间,这里是毫秒单位!

案例2 - 固定图片

此处为隐藏的内容!
发表评论并刷新,方可查看

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:9   其中:访客  8   博主  1

    • LL LL

      谢谢分享!

      • LL LL

        黑夜无论怎样悠长,白昼总会到来。— 莎士比亚

        • dddd dddd

          你以为这个世界上只有你一个人与众不同么?— 鸣人《火影忍者》

          • ︶﹋代码疯子 ︶﹋代码疯子

            世上本无所谓好和坏,思想使然。— 莎士比亚

            • 11 11

              友谊是两颗心真诚相待,而不是一颗心对另一颗心的敲打。— 鲁迅

              • Xecades Xecades

                当我沉默的时候,我觉得很充实,当我开口说话,就感到了空虚。— 鲁迅

                • 天使派来的逗比 天使派来的逗比

                  爱所有人,信任少数人,不负任何人。— 莎士比亚

                  • 仙踪小栈 仙踪小栈

                    感觉你这个主要是指评论框的背景图片吧