(一)原生js案例之图片轮播

作者：从前慢现在也慢 | 2024-07-18 08:14:47

踩

(一)原生js案例之图片轮播

原生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>
    *{
      padding: 0;
      margin: 0;
    }
    #content{
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px auto;
      position: relative;
      background-color: aliceblue;
  }
    #content a{
      width: 40px;
      height: 40px;
      background-color: #000;
      border: 5px solid #fff;
      position: absolute;
      top: 175px;
      text-decoration: none;
      line-height: 40px;
      text-align: center;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
    }
    #content a:hover{
      filter: opacity(100);
      opacity: 1;
    }
    #prev{left: 10px;}
    #next{ right: 10px;}
    #desc,#num{
      position: absolute;
      left: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      background-color: #000;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
      padding: 0 10px;
    }
    #desc{bottom: 0;}
    #img{width: 400px;height: 400px;}
    #num{filter: opacity(.9);
      opacity: 90;
      text-align: center;
    }
  </style>
  <script>
    window.onload = function () {
      const oPrev = document.getElementById('prev');
      const oNext = document.getElementById('next');
      const oImg = document.getElementsByTagName('img')[0];
      const oDesc = document.getElementById('desc');
      const oNum = document.getElementById('num');
      const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];
      const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]
      let num = 0;

      
      tabChange()

      oPrev.addEventListener('click', function(){
        num--
        if(num < 0){
          num = oImgs.length-1;
        }
        tabChange()

      })

      oNext.addEventListener('click', function(){
        num++
        if(num == oImgs.length){
          num = 0;
        }
        tabChange()
      })
      function tabChange(){
        //计算图片数量
        oNum.innerHTML = num+1 + "/" + oImgs.length;
        oImg.src = oImgs[num];
        oDesc.innerHTML = oText[num];
      }


    }
  </script>
</head>
<body>
  <div id="content">
    <a id="prev" href="javascript:;"><</a>
    <img id="img" alt="">
    <p id="desc">图片文字加载中...</p>
    <span id="num">正在计算中...</span>
    <a id="next" href="javascript:;">></a>
  </div>
</body>
</html>
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

效果二

可以控制是否轮播播放
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片切换</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #content{
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px auto;
      position: relative;
      background-color: aliceblue;
  }
    #content a{
      width: 40px;
      height: 40px;
      background-color: #000;
      border: 5px solid #fff;
      position: absolute;
      top: 175px;
      text-decoration: none;
      line-height: 40px;
      text-align: center;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
    }
    #content a:hover{
      filter: opacity(100);
      opacity: 1;
    }
    #prev{left: 10px;}
    #next{ right: 10px;}
    #desc,#num{
      position: absolute;
      left: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      background-color: #000;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
      padding: 0 10px;
    }
    #desc{bottom: 0;}
    #img{width: 400px;height: 400px;}
    #num{filter: opacity(.9);
      opacity: 90;
      text-align: center;
    }
    .tool{
      text-align: center;
    }
  </style>
  <script>
    window.onload = function () {
      const oPrev = document.getElementById('prev');
      const oNext = document.getElementById('next');
      const oImg = document.getElementsByTagName('img')[0];
      const oDesc = document.getElementById('desc');
      const oNum = document.getElementById('num');
      const oLoop = document.getElementById('loop');
      const oStop = document.getElementById('stop');
      const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];
      const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]
      let num = 0;
      let isLoop = true;


      oLoop.addEventListener('click', function(){
        isLoop = true;
      })

      oStop.addEventListener('click', function(){
        isLoop = false;
      })


      
      tabChange()

      oPrev.addEventListener('click', function(){
        num--
        if(num < 0){
          if(isLoop){
            num = oImgs.length-1;
          }else{
            alert("没有上一页了")
            num = 0;
            return false;
          }
        }
        tabChange()

      })

      oNext.addEventListener('click', function(){
        num++
        if(num == oImgs.length){
          if(isLoop){
            num = 0;
          }else{
            alert("没有下一页了")
            num = oImgs.length-1;
            return false;
          }
        }
        tabChange()
      })
      function tabChange(){
        //计算图片数量
        oNum.innerHTML = num+1 + "/" + oImgs.length;
        oImg.src = oImgs[num];
        oDesc.innerHTML = oText[num];
      }


    }
  </script>
</head>
<body>
  <div class="tool">
    <h1>图片切换</h1>
    <button id="loop">循环切换</button>
    <button id="stop">停止循环切换</button>
  </div>
  <div id="content">
    <a id="prev" href="javascript:;"><</a>
    <img id="img" alt="">
    <p id="desc">图片文字加载中...</p>
    <span id="num">正在计算中...</span>
    <a id="next" href="javascript:;">></a>
  </div>
</body>
</html>
···
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/844484?site