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

孤狼
孤狼
孤狼
171
文章
113
评论
2019年6月21日21:53:294225,139 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:

评论:42   其中:访客  41   博主  1
    • cuokai cuokai

      摘耳机,是新世纪的脱帽礼。

      • Star Star

        听说你的城市下雨了,不知道你带伞没有,如果带了这雨就白下了。

        • 风华 风华

          人生不如意十有八九,从来没碰见过一二。

          • 风华 风华

            学而不思则罔,思而不学则殆,不思不学成网贷。

            • 晚风. 晚风.

              你并不是一无所有,你还有脸回家。

              • 夏树繁花 夏树繁花

                岁月静好,秃如其来。

                • 吴子川 吴子川

                  别人的起点,是你遥不可及的终点。

                  • 老H 老H

                    正好需要,看看。

                    • fast fast

                      如果困难不能使我倒下,那么,钱能。

                      • 1 1