JQuery自动更换背景图

最新推荐文章于 2022-05-26 15:00:53 发布

陈醋拌饭

最新推荐文章于 2022-05-26 15:00:53 发布

阅读量1k

点赞数 2

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44167504/article/details/109047255

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery自动更换背景图

在这里插入图片描述
思路：给一个div存放图片设置大小及背景图，将图片名称设置成连续的数字（等）格式，设置定时器，当i=1时，5s后，i=2，5s后i=3，5s后i=1，以达到循环更换的目的（超简单的是吧）

<!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: no-repeat; */
      background-position: center;
      background-size: cover;
      border: 1px solid #ccc;
      overflow: hidden;
      transition: 0.5s linear;
    }

    .bo {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </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)"
        });
      }, 5000);
    });
  </script>
</body>

</html>