HTML图片自动轮播技术学习

发表于 更新于 阅读次数：

最近遇到一个小需求，就是在网页前端实现图片自动轮播，简单学习一下。

技术原理

网页前端实现图片自动轮播的技巧如下：

  • 图片所在容器元素采用绝对定位，从而实现所有图片叠加到一块。
  • 通过CSS实现左右箭头
  • 通过js调整图片所在容器的透明度，从而实现图片的轮播。同时调整播放顺序按钮的背景色，从而实现顺序指示的功能。

技术实现

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>图片轮播技术测试</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #max {
            width: 900px;
            margin: 0 auto;
            margin-top: 0%;
        }

        .re {
            position: relative;
        }

        .arrow {
            height: 20px;
            width: 20px;
            border: solid #333;
            border-width: 0 4px 4px 0;
            display: inline-block;
            padding: 3px;
        }

        .left {
            transform: rotate(135deg);
            cursor: pointer;
            margin-top: 240px;
            margin-left: 20px;
            float: left;
        }

        .right {
            transform: rotate(-45deg);
            cursor: pointer;
            margin-top: 240px;
            margin-right: 10px;
            float: right;
        }

        .re ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .re ul>li {
            position: absolute;
            transition: 2s;
            opacity: 0;
        }

        .re ul>li img {
            width: 900px;
            height: 500px;
            border-radius: 1%;
            border: 5px solid #fffbd6;
        }

        #max ol {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, 75px);
            grid-template-rows: auto;
            grid-gap: 1em;
            gap: 1em;
            float: right;
            margin-top: 450px;
            list-style: none;
            top: 0;
            left: 0;
        }

        #max ol li {
            width: 20px;
            height: 20px;
            font-size: 15px;
            line-height: 20px;
            float: left;
            text-align: center;
            border-radius: 2em;
            border: 5px solid #999999;
        }
    </style>
</head>

<body>
    <div id="max">
        <div class="re" onmouseover="mouseover()" onmouseout="mouseout()">
            <ul>
                <li><img src="./pic/big_size/p1.jpg" alt=""></li>
                <li><img src="./pic/big_size/p2.jpg" alt=""></li>
                <li><img src="./pic/big_size/p3.jpg" alt=""></li>
                <li><img src="./pic/big_size/p4.jpg" alt=""></li>
                <li><img src="./pic/big_size/p5.jpg" alt=""></li>
            </ul>
            <div class="arrow left" onClick="prev()"></div>
            <div class="arrow right" onClick="next()"></div>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
</body>

<script>
    function fun(i, j) {//转换图片函数，就是把透明度改了一下
        lik[i].style.opacity = 1;
        lik[j].style.opacity = 0;
        lik[i + 5].style.backgroundColor = "#ffffff";//改一下小图标
        lik[j + 5].style.backgroundColor = "#00000000"
    }

    function auto() {//轮播循环函数
        if (++i >= 5) {
            i = 0;
            fun(0, 4);
        }
        else fun(i, i - 1);
    }

    function mouseover(){
        console.log('clear timer!');
        clearInterval(timer);
    }

    function mouseout(){
        console.log('set timer!');
        timer = setInterval(auto, transition); //调用定时器
    }

    function prev(){
        if (--i < 0) {
            i = 4;
            fun(4, 0);
        }
        else fun(i, i + 1);
    }

    function next(){
        if (++i >= 5) {
            i = 0;
            fun(0, 4);
        }
        else fun(i, i - 1);
    }

    var transition = 5000;
    var box = this.document.getElementsByClassName("re")[0];
    var lik = box.getElementsByTagName("li");

    fun(0, 1);//初始化下
    var i = 0;
    
    timer = this.setInterval(auto, transition);

    var j = 0;
    for (; j < 5; j++) {//点击小图标也可以转换图片
        lik[j + 5].ind = j;
        lik[j + 5].onclick = function () {
            fun(this.ind, i)
            i = this.ind;
        }
    }
</script>

</html>

参考链接

  1. 超简单全面的html图片自动轮播,by 学习是人类进化的阶梯.
  2. 简单的HTML网页图片轮播自动切换,by 时钟与夏蝉.
  3. 利用CSS实现上下左右箭头,by 墨初.