javascript实现background 定时循环随机背景图 - 阿强爱分享

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

作者: Aqiang

全网最全的网络资源分享网站

手机扫码查看

标签:

背景图

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!邮箱:2377724272@qq.com

案例一,采用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://www.youngxj.cn/519.html

管理员设置回复可下载
分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。
头像
站长签名: 专注分享各类源码-全网资源免费分享平台好货不私藏

文章作者信息版权声明

阅读时间:  发布于:2019-9-16

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

本文链接: https://iooqp.cn/?post=394

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 1414 个字!

分享到:

精彩评论

未显示?请点击刷新
  1. #1
    滑稽时代 游客 Lv.1

    可以的

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏