美文网首页基础前端
javascript实现background 定时循环随机背景图

javascript实现background 定时循环随机背景图

作者: CondorHero | 来源:发表于2019-02-10 22:49 被阅读26次

说明:网址的背景通常为白色,为了美观可进行自定义。再炫酷的效果就是进行随机播放。这里提供两种办法。

一、采用API接口

setInterval(Getbg,2000);  //时间放慢些,1000ms加载有点卡。
function Getbg(){
  var randomBgIndex = Math.round( Math.random() * 166 );
  //输出随机的背景图
  document.body.style.background="#9E9E9E url(http://api.yum6.cn/360img?"+randomBgIndex+") no-repeat ";
}

二、固定图片

var bodyBgs = [];
bodyBgs[0] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdwv00e9j211y0lcjs7.jpg";
bodyBgs[1] = "https://ww3.sinaimg.cn/large/87c01ec7gy1fshdwv56rfj21hc0u0n05.jpg";
bodyBgs[2] = "https://ww3.sinaimg.cn/large/87c01ec7gy1fshdwv5u70j21hc0u0n04.jpg";
bodyBgs[3] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdwv8wc2j21hc0u0q5d.jpg";
bodyBgs[4] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdwva5i5j21hc0u0q66.jpg";
bodyBgs[5] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdwvjc6rj21hc0u0tnw.jpg";
bodyBgs[6] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdwvw3hsj21hc0u044j.jpg";
bodyBgs[7] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdww034zj21hc0u0jvv.jpg";
bodyBgs[8] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdww0q12j21hc0u0tbu.jpg";
bodyBgs[9] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdww62pdj21hc0u07b7.jpg";
bodyBgs[10] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdww8nc0j21hc0u0wjv.jpg";
setInterval(Getbg, 1000);
function Getbg(){
  var randomBgIndex = Math.round( Math.random() * 10 );
  //输出随机的背景图
  document.body.style.background="#9E9E9E url("+ bodyBgs[randomBgIndex] +") no-repeat ";
}

固定地址用的新浪图床,可自行上传图片,更改数组的链接。
另外:embed可内嵌音视频

相关文章

  • javascript实现background 定时循环随机背景图

    说明:网址的背景通常为白色,为了美观可进行自定义。再炫酷的效果就是进行随机播放。这里提供两种办法。 一、采用API...

  • IDEA必备插件系列-Background Image Plus

    在 IntelliJ 系列编辑器 中循环显示随机背景图像 Background Image Plus + 是 Ba...

  • css实现双重背景图,过度动画,缩放等

    background-attachment: fixed;background-size: cover;实现背景图...

  • css实现网格背景

    实现代码 background-image 属性为元素设置背景图像。background-size 规定背景图...

  • 背景

    background-color&background-image 背景颜色&背景图片 背景图片默认平铺显示,背景...

  • 前端学习笔记

    何时使用img标签,何时使用background-image背景图像? background-image是背景图片...

  • CSS背景

    background-color 设置背景颜色 background-image 设置背景图片 可以同时设置背景图...

  • 侧边工具条开发

    使用Sass、RequireJS 样式实现方式 使用Sass 使用背景图片:精灵图,通过改变background-...

  • CSS背景

    背景颜色:background-color背景图片:background-image平铺图片:background...

  • 二阶段day2作业

    背景图片:background - image:url(地址)background - repeat:repeat...

网友评论

    本文标题:javascript实现background 定时循环随机背景图

    本文链接:https://www.haomeiwen.com/subject/mdffeqtx.html