JavaScript实现轮播图方法，代码简单

2024-02-1820:47:52WEB前端开发Comments691 views字数 10555阅读模式

轮播图有很多种实现方法，这是其中一种最清晰的方法。思路很清晰，代码很简单，欢迎大佬多指教。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

效果图

先来看下效果图，嫌麻烦就不用具体图片来实现了，主要是理清思路。（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

JavaScript实现轮播图方法，代码简单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

HTML

首先是html内容，布局很简单，一个图片列表，一个点列表，两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据（下面JS代码会提到）。记得给默认显示的图片和对应的小圆点加上active类哦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrap">
       <ul class="list">
           <li class="item active">0</li>
           <li class="item">1</li>
           <li class="item">2</li>
           <li class="item">3</li>
           <li class="item">4</li>
       </ul>
       <ul class="pointList">
           <li class="point active" data-index = 0></li>
           <li class="point" data-index = 1></li>
           <li class="point" data-index = 2></li>
           <li class="point" data-index = 3></li>
           <li class="point" data-index = 4></li>
       </ul>
       <button class="btn" id="leftBtn"> < </button>
       <button class="btn" id="rightBtn"> > </button>
   </div>

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

CSS

思路：父容器list相对定位，item绝对定位，实现让所有图片重叠在父容器内。利用z-index来设置图片高度，图片高度最高会显示在顶层上。那么整个容器中，左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要比图片高。active是一个样式，给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果，opacity完全不透明到透明，再加个transition动画效果。最后就是cursor给小圆点添加“小手指”，其他就没什么好说的了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.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
<style>
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }
        .list {
            width: 800px;
            height: 400px;
            position: relative;
            padding-left: 0px;
        }
        .item {
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s;
        }
        .item:nth-child(1) {
            background-color: skyblue;
        }
        .item:nth-child(2) {
            background-color: yellowgreen;
        }
        .item:nth-child(3) {
            background-color: rebeccapurple;
        }
        .item:nth-child(4) {
            background-color: pink;
        }
        .item:nth-child(5) {
            background-color: orange;
        }
        .item.active {
            z-index: 10;
            opacity: 1;
        }
        .btn {
            width: 60px;
            height: 100px;
            z-index: 100;
            top: 150px;
            position: absolute;
        }
        #leftBtn {
            left: 0px;
        }
        #rightBtn {
            right: 0px;
        }
        .pointList {
            list-style: none;
            padding-left: 0px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 200;
        }
        .point {
            width: 10px;
            height: 10px;
            background-color: antiquewhite;
            border-radius: 100%;
            float: left;
            margin-right: 8px;
            border-style: solid;
            border-width: 2px;
            border-color: slategray;
            cursor: pointer; 
        }
        .point.active{
            background-color: cadetblue;
        }
    </style>

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

Javascript

Index可以说是整个代码里面的"核心"，先封装一个清除active的方法，这里面要清除图片的active（显示在最上层），比如切换到下一张图上张图的active就要清除。还有point的active（图片对应小圆点改变样式）。然后goIndex这个方法就是给图片和对应的小圆点同时加上active，左右按钮绑定的方法就不说了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html

用getAttribute拿到刚才给li标签绑定的data-index属性，绑定图片index = pointindex，就能实现点击小圆点图片切换了。由于上面goIndex方法早已经绑定好了给图片添加active样式的时候也给小圆点添加的样式了，就可以实现图片切换小圆点跟随变化的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.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
<script>
        var items = document.querySelectorAll(".item");//图片节点
        var points = document.querySelectorAll(".point")//点
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var all = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定时器跳转参数初始化
        
        //封装一个清除active方法
        var clearActive = function () {
            for (i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (j = 0; j < points.length; j++) {
                points[j].className = 'point';
            }
        }
        //改变active方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按钮事件
        var goLeft = function () {
            if (index == 0) {
                index = 4;
            } else {
                index--;
            }
            goIndex();
        }
        //右按钮事件
        var goRight = function () {
            if (index < 4) {
                index++;
            } else {
                index = 0;
            }
            goIndex();
        }
        
        //绑定点击事件监听
        left.addEventListener('click', function () {
            goLeft();
            time = 0;//计时器跳转清零
        })
        right.addEventListener('click', function () {
            goRight();
            time = 0;//计时器跳转清零
        })
        for(i = 0;i < points.length;i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//计时器跳转清零
            })
        }
        //计时器轮播效果
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }   
        },100)
    }
        play();
        //移入清除计时器
        all.onmousemove = function(){
            clearInterval(timer)
        }
       //移出启动计时器
        all.onmouseleave = function(){
            play();
        }
    </script>

总结：这个简单的轮播图实现例子是第一次写最容易理解，逻辑最清晰的一种。下面我把完整的代码块放出来，直接复制粘贴就可以运行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.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
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html>
<head>
    <style>
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }
        .list {
            width: 800px;
            height: 400px;
            position: relative;
            padding-left: 0px;
        }
        .item {
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s;
        }
        .item:nth-child(1) {
            background-color: skyblue;
        }
        .item:nth-child(2) {
            background-color: yellowgreen;
        }
        .item:nth-child(3) {
            background-color: rebeccapurple;
        }
        .item:nth-child(4) {
            background-color: pink;
        }
        .item:nth-child(5) {
            background-color: orange;
        }
        .item.active {
            z-index: 10;
            opacity: 1;
        }
        .btn {
            width: 60px;
            height: 100px;
            z-index: 100;
            top: 150px;
            position: absolute;
        }
        #leftBtn {
            left: 0px;
        }
        #rightBtn {
            right: 0px;
        }
        .pointList {
            list-style: none;
            padding-left: 0px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 200;
        }
        .point {
            width: 10px;
            height: 10px;
            background-color: antiquewhite;
            border-radius: 100%;
            float: left;
            margin-right: 8px;
            border-style: solid;
            border-width: 2px;
            border-color: slategray;
            cursor: pointer; 
        }
        .point.active{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index = 0></li>
            <li class="point" data-index = 1></li>
            <li class="point" data-index = 2></li>
            <li class="point" data-index = 3></li>
            <li class="point" data-index = 4></li>
        </ul>
        <button class="btn" id="leftBtn"> < </button>
        <button class="btn" id="rightBtn"> > </button>
    </div>
    <script>
        var items = document.querySelectorAll(".item");//图片
        var points = document.querySelectorAll(".point")//点
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var all = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定时器跳转参数初始化
        
        //清除active方法
        var clearActive = function () {
            for (i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (j = 0; j < points.length; j++) {
                points[j].className = 'point';
            }
        }
        //改变active方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按钮事件
        var goLeft = function () {
            if (index == 0) {
                index = 4;
            } else {
                index--;
            }
            goIndex();
        }
        //右按钮事件
        var goRight = function () {
            if (index < 4) {
                index++;
            } else {
                index = 0;
            }
            goIndex();
        }
        
        //绑定点击事件监听
        left.addEventListener('click', function () {
            goLeft();
            time = 0;//计时器跳转清零
        })
        right.addEventListener('click', function () {
            goRight();
            time = 0;//计时器跳转清零
        })
        for(i = 0;i < points.length;i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//计时器跳转清零
            })
        }
        //计时器
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }   
        },100)
    }
        play();
        //移入清除计时器
        all.onmousemove = function(){
            clearInterval(timer)
        }
       //移出启动计时器
        all.onmouseleave = function(){
            play();
        }
    </script>
</body>
</html>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/60321.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/60321.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定