js随机更换背景图-阿里云开发者社区

js随机更换背景图

2023-09-16 64

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： js随机更换背景图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更换背景图</title>
    <style>
      /* #box {
      width: 600px;
      height: 350px;
      margin: 100px auto;
      position: relative;
      background-image: url("./img/1.jpg");
      background-position: center;
      background-size: cover;
      border: 1px solid #ccc;
      overflow: hidden;
      transition: 0.5s linear;
    }
    .bo {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    } */
      body {
        padding: 0;
        background-attachment: fixed;
        background-clip: border-box;
        background-color: #666666;
        background-origin: padding-box;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        background-image: url("");
      }
    </style>
    </style>
    <script src="https:/apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="box"></div>
    <script>
      // $(document).ready(function () {
      //   var i = 1;
      //   setInterval(function () {
      //     if (i == 1) {
      //       i = 2;
      //     } else if (i == 2) {
      //       i = 3;
      //     } else {
      //       i = 1
      //     }
      //     $('#box').css({
      //       "background-image": "url(./img/" + i + ".jpg)"
      //     });
      //   }, 60000);
      // });
      //建文件夹img  图片命名-bg_1.jpg
      $(document).ready(function() {
        var random_bg = Math.floor(Math.random() * 6 + 1);
        var bg = 'url(./img/bg_' + random_bg + '.jpg)';
        $("body").css("background-image", bg);
      });
    </script>
  </body>
</html>

js随机更换背景图

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

js随机更换背景图

热门文章

最新文章

相关课程

相关电子书

相关实验场景