美文网首页基础前端
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 定时循环随机背景图

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