杨小杰博客提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

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

Young小杰2018-6-29 14:18网站搭建(4)619查询中……小标签: javascript AE博客

案例一,采用API接口


setInterval('Getbg();', 1000);
function Getbg(){
  var randomBgIndex = Math.round( Math.random() * 166 );
  //输出随机的背景图
  document.body.style.background="#9E9E9E url(http://api.yum6.cn/360img?"+randomBgIndex+") no-repeat ";
}
利用小杰的壁纸API接口实现,第一行的1000是切换时间,这里是毫秒单位!


案例二,采用固定图片地址


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 ";
}
这里用的固定地址,用的新浪图床,喜欢的话可以自己扩充图片,我这里简短的展示了10个图片!

而且这样就解决了https的问题!

文章到此结束,希望大家喜欢!配一个小姐姐
t0196220af44108c5eb.jpg



评论:

腾讯视频 Google Chrome 63.0.3239.132 Windows 7 2018-08-01 17:01
人家谈恋爱,靠长相靠浪漫靠烧钱,而你靠对方眼瞎。
_零度时光 Google Chrome 55.0.2883.87 Windows 7 2018-07-13 22:58
图片的API怎么做啊??
壶老酒 Google Chrome 57.0.2987.132 Linux 2018-06-30 00:25
人要是决定自暴自弃了,就会活得特别开心。打卡成功,现在时间:0点25分记得每天坚持打卡哦!
Mr.白锌 Google Chrome 63.0.3239.26 Windows 7 2018-06-29 17:50
来偷了

发表评论: