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

js随机更换背景图

2023-09-16 47

版权

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

简介： 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随机更换背景图

热门文章

最新文章

相关课程

相关电子书

相关实验场景