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

孤狼
孤狼
孤狼
171
文章
118
评论
2019年6月21日21:53:294926,669 3867字阅读12分53秒
摘要

现在网上有很多随机图片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 - 固定图片

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

继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
孤狼
  • 本文由 发表于 2019年6月21日21:53:29
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
【新年气象】过年啦WordPress 主题添加挂灯笼特效 WordPress

【新年气象】过年啦WordPress 主题添加挂灯笼特效

过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了。代码这里也分享一下,有喜欢的朋友拿去用,将灯笼挂在自己的博客上,增加点过年的气氛。这个灯笼只是简单应...
匿名

发表评论

匿名网友 填写信息

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

评论:49   其中:访客  48   博主  1
    • yeryery yeryery

      上班的我——风吹就倒,下班的我——狗追不到。

      • yeryery yeryery

        一直对发型不满意的人,有一个共同点,不肯承认这是脸的问题。

        • kelongtiong kelongtiong

          上班的我——风吹就倒,下班的我——狗追不到。

          • 78tnnd 78tnnd

            人丑就要多读书,这样以后,才能有钱整容。

            • 7976 7976

              和玩不来的人一起玩,感觉特别像是在加班。

              • 果

                你打起精神,3分钟就能做完的事情,打起精神就要花上3小时。

                • sdasdsad sdasdsad

                  当代年轻人恋爱最高境界,无话可说,但又彼此折磨。