(五)原生js案例之图片切换功能

又一款轮播效果，功能又丰富了点，增加了初始化加载动画，可以参考思路

效果预览

代码实现

• 静态页面

<div id="pic">
      <img src="" alt="" />
      <span>数量正在加载中...</span>
      <p>文字说明正在加载中...</p>
      <ul>
        <li class="active first"></li>
        <li class="second"></li>
        <li></li>
        <li></li>
      </ul>
    </div>
1
2
3
4
5
6
7
8
9
10
11

• 核心逻辑代码

 window.onload = function () {
        const oPic = document.getElementById('pic')
        const oImg = oPic.querySelector('#pic img')
        const oUl = document.querySelector('#pic ul')
        const oLi = oUl.querySelectorAll('#pic ul li')
        const oSpan = document.querySelector('#pic span')
        const oP = document.querySelector('#pic p')
        const arrUrl = [
          './images/img1.png',
          './images/img2.png',
          './images/img3.png',
          './images/img4.png'
        ]
        const arrText = [
          '这是第一张图片',
          '这是第二张图片',
          '这是第三张图片',
          '这是第四张图片'
        ]
        //初始化
        let num = 0
        init()
        function init() {
          oImg.src = arrUrl[num]
          oSpan.innerHTML = `数量：${num + 1} / 4`
          oP.innerHTML = arrText[num]
        }

        //点击切换图片
        for (var i = 0; i < oLi.length; i++) {
          oLi[i].index = i
          oLi[i].onclick = function () {
            num = this.index
            init()
            for (var i = 0; i < oLi.length; i++) {
              oLi[i].classList.remove('active')
            }
            this.classList.add('active')
          }
        }
      }
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

功能比较简单，后面会逐步丰富业务功能