(八)原生js案例之图片轮播显示设置背景

图片轮播，看到自己喜欢的壁纸，进行选择设置

效果

实现代码

• 必要的css

* {
      margin: 0;
      padding: 0;
    }

    body {
      height: 100vh;
      overflow: hidden;
    }

    #box {
      width: 800px;
      height: 400px;
      border: 1px solid #ccc;
      margin: 60px auto 20px;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 静态页面

<div id="box">
   
  </div>
  <ul id="list" class="order-list d-flex justify-content-center">
    <li class="list-group-item d-flex align-items-center">
      <button type="button" class="btn btn-primary mx-2">图片播放</button>
      <button type="button" class="btn btn-danger mx-2">选择确认</button>
    </li>
  </ul>
1
2
3
4
5
6
7
8
9

• 核心代码

window.onload = function () {
      const oBtn = document.querySelectorAll('button');
      const picArr = ['./images/1.png', './images/2.png', './images/3.png'];
      const oBody = document.body;
      const oBox = document.getElementById('box');
      let index = 0, timer = null;

      oBtn[0].onclick = function () {
        clearInterval(timer);
        //定时更换背景图片
        function changeBg() {
          //实现图片循环切换
          index = index % 3
          oBox.index = index
          oBox.style.background = `url(${picArr[index]}) no-repeat center center`;
          index++;
        }
        timer = setInterval(changeBg, 1000)
      }

      //取消定时器
      oBtn[1].onclick = function () {
        clearInterval(timer);
        oBody.style.background = `url(${picArr[oBox.index]}) no-repeat center center`;
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26