js实现的简易轮播图，适合初学者_js轮播图实现简单代码

作者：运维做开发 | 2024-07-09 22:00:09

踩

js轮播图实现简单代码

js实现的简易轮播图，适合初学者

功能点

1 鼠标进入轮播图展示左右箭头，鼠标移除时隐藏
2 动态生成图片和小圆圈
3 图片移动时，对应的小圆圈会改变颜色
4 点击左右箭头可以切换轮播图
5 点击小圆圈可以切换到对应的图片
6 轮播图自动播放，鼠标移入轮播图，自动播放停止

css

 <div id="banner_wrap">
        <ul id="banner">
        </ul>
        <!-- 小圆圈 -->
        <ul class="focus">
        </ul>
        <!-- 左右箭头 -->
        <div class="btn left"></div>
        <div class="btn right"></div>
    </div>
1
2
3
4
5
6
7
8
9
10

样式

    <style type="text/css">
        *,
        ul,
        a {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            /*超链接下划线*/
        }

        #banner_wrap {
            height: 400px;
            width: 1000px;
            margin: 70px auto;
            border: 1px solid #dddddd;
            overflow: hidden;
            /*盒子溢出的部分不显示*/
            position: relative;
            /*相对定位*/
        }

        #banner {
            height: 400px;
            width: 4000px;
            position: absolute;
            /*绝对定位*/
        }

        #banner img {
            width: 1000px;
            height: 400px;
            float: left;
        }

        .btn {
            display: none;
            width: 35px;
            height: 70px;
            position: absolute;
            z-index: 2;
            opacity: .5;
            /*透明度*/
            top: 50%;
            margin-top: -35px;
            border-radius: 3px;
            /*方框的边角弧度*/
            cursor: pointer;
            /*鼠标放到上面的样式*/
        }

        .right {
            left: 960px;
            background: url("../image/right.png") #ccc no-repeat 50%;
        }

        .left {
            left: 5px;
            background: url("../image/left.png") #ccc no-repeat 50%;
        }

        /*用伪类选择器做出鼠标放置在div相框中左右箭头的淡入淡出*/
        #banner_wrap:hover>.btn {
            display: block;
        }

        .focus {
            width: 108px;
            height: 20px;
            position: absolute;
            z-index: 3;
            left: 50%;
            margin-left: -54px;
            bottom: 12px;
        }

        .focus>li {
            width: 12px;
            height: 12px;
            background: #FFFFFF;
            float: left;
            border-radius: 50%;
            margin: 4px 4px;
            cursor: pointer;
        }
    </style>
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

js 代码

 <script>
            var imgArr = [
                {
                    src: 'http://p1.music.126.net/4YaMKQZ5UVRzFklcVZjXcQ==/109951168267766752.jpg?imageView&quality=89'
                },
                {
                    src: 'http://p1.music.126.net/sDRfXlvOUsVx5o87oxKo5A==/109951168267554057.jpg?imageView&quality=89'
                },
                {
                    src: 'http://p1.music.126.net/xdK46YZW1eI__3OjGXsucw==/109951168267964406.jpg?imageView&quality=89'
                },
                {
                    src: 'http://p1.music.126.net/Sevs60nRGz0PCKq6iM5umg==/109951168267742401.jpg?imageView&quality=89'
                },
            ]
            // 鼠标经过轮播图时显示按钮，离开时隐藏
            var banner = document.querySelector('#banner');
            var wrap = document.querySelector('#banner_wrap');
            for (var i = 0; i < imgArr.length; i++) {
                var li = document.createElement('li');
                var a = document.createElement('a');
                a.href = '#';
                var img = document.createElement('img');
                img.src = imgArr[i].src;
                img.alt = '';
                a.appendChild(img);
                li.appendChild(a);
                banner.appendChild(li);
            }
            //左箭头
            var left = document.querySelector('.left');
            var right = document.querySelector('.right');
            //小圆点
            var focus = document.querySelector('.focus');
            //所有li
            var images = banner.querySelectorAll('img');
            //图片长度
            var imagesLength = images.length;
            //图片宽度
            var imgWidth = images[0].offsetWidth;
            //动画是否结束
            var animateSuccess = true;
            //当前图片的下标
            var curImgIndex = 0;
            //自动播放时间间隔
            var autoPlayInterval = 3000;
            //遍历li
            for (var i = 0; i < imagesLength; i++) {
                var li = document.createElement('li');
                li.setAttribute('index', i);
                focus.appendChild(li);
                li.addEventListener('click', function () {
                    if (animateSuccess) {
                        animateSuccess = false;
                        var idx = parseInt(this.getAttribute('index'));
                        var interval = idx * imgWidth;
                        animate(banner, -interval, function () {
                            animateSuccess = true;
                        });
                        curImgIndex = idx;
                        setCurrentFocus();
                    }
                })
            }
            //设置圆点背景色
            setCurrentFocus();
            //左箭头
            left.addEventListener('click', function () {
                if (animateSuccess) {
                    //如果当前是第一张，则定位到最后一张
                    if (curImgIndex == 0) {
                        curImgIndex = imagesLength - 1;
                        banner.style.left = -(banner.offsetLeft + imgWidth * curImgIndex) + 'px';
                    } else {
                        animateSuccess = false;
                        animate(banner, banner.offsetLeft + imgWidth, function () {
                            animateSuccess = true;
                        })
                        curImgIndex--;
                    }
                    //设置小圆点
                    setCurrentFocus()

                }
            })
            //右箭头
            right.addEventListener('click', function () {
                if (animateSuccess) {
                    //如果当前最后一张，则定位到第一张
                    if (curImgIndex == imagesLength - 1) {
                        curImgIndex = 0;
                        banner.style.left = (banner.offsetLeft + imgWidth * (imagesLength - 1)) + 'px';
                    } else {
                        animateSuccess = false;
                        animate(banner, banner.offsetLeft - imgWidth, function () {
                            animateSuccess = true;
                        })
                        curImgIndex++;
                    }
                    setCurrentFocus()

                }
            })
            //自动播放定时器
            var autoPlayTimer = setInterval(function () {
                right.click();
            }, autoPlayInterval);

            //鼠标移入移除自动播放定时器
            wrap.addEventListener('mouseenter', function () {
                clearInterval(autoPlayTimer);
                autoPlayTimer = null;
            })
            //鼠标移出开启自动播放定时器
            wrap.addEventListener('mouseleave', function () {
                autoPlayTimer = setInterval(function () {
                    right.click();
                }, autoPlayInterval);
            })
            /*
            *简单的一个左右移动的动画效果，用定时器实现
            */
            function animate(obj, target, callback) {
                clearInterval(obj.timer);
                obj.timer = setInterval(() => {
                    //移动的距离 / 10 == 步长
                    var distance = target - obj.offsetLeft;
                    //步长
                    var step = distance / 10;
                    step = step > 0 ? Math.ceil(distance) : Math.floor(distance);
                    obj.style.left = obj.offsetLeft + step + 'px';
                    //移动到目标位置结束定时器，执行回调函数
                    if (obj.offsetLeft == target) {
                        clearInterval(obj.timer);
                        callback && callback();
                    }
                }, 50)
            }
            //设置当前的小圆圈
            function setCurrentFocus() {
                for (var i = 0; i < focus.children.length; i++) {
                    focus.children[i].style.background = '#FFFFFF';
                }
                focus.children[curImgIndex].style.background = 'red';
            }
        </script>
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

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
       *,
       ul,
       a {
           margin: 0;
           padding: 0;
           list-style: none;
           text-decoration: none;
           /*超链接下划线*/
       }

       #banner_wrap {
           height: 400px;
           width: 1000px;
           margin: 70px auto;
           border: 1px solid #dddddd;
           overflow: hidden;
           /*盒子溢出的部分不显示*/
           position: relative;
           /*相对定位*/
       }

       #banner {
           height: 400px;
           width: 4000px;
           position: absolute;
           /*绝对定位*/
       }

       #banner img {
           width: 1000px;
           height: 400px;
           float: left;
       }

       .btn {
           display: none;
           width: 35px;
           height: 70px;
           position: absolute;
           z-index: 2;
           opacity: .5;
           /*透明度*/
           top: 50%;
           margin-top: -35px;
           border-radius: 3px;
           /*方框的边角弧度*/
           cursor: pointer;
           /*鼠标放到上面的样式*/
       }

       .right {
           left: 960px;
           background: url("../image/right.png") #ccc no-repeat 50%;
       }

       .left {
           left: 5px;
           background: url("../image/left.png") #ccc no-repeat 50%;
       }

       /*用伪类选择器做出鼠标放置在div相框中左右箭头的淡入淡出*/
       #banner_wrap:hover>.btn {
           display: block;
       }

       .focus {
           width: 108px;
           height: 20px;
           position: absolute;
           z-index: 3;
           left: 50%;
           margin-left: -54px;
           bottom: 12px;
       }

       .focus>li {
           width: 12px;
           height: 12px;
           background: #FFFFFF;
           float: left;
           border-radius: 50%;
           margin: 4px 4px;
           cursor: pointer;
       }
   </style>
</head>

<body>
   <div id="banner_wrap">
       <ul id="banner">
       </ul>
       <!-- 小圆圈 -->
       <ul class="focus">
       </ul>
       <!-- 左右箭头 -->
       <div class="btn left"></div>
       <div class="btn right"></div>
   </div>
       <!-- 
               功能点：
               1 鼠标经过轮播图时显示按钮，离开时隐藏
               2 点击右侧按钮，图片往左播放一张，点击左侧按钮相反
               3 图片播放的同时，下面的圆圈模块会跟随一起变化
               4 点击小圆圈，可以播放相应图片
               5 鼠标不经过轮播图时，自动播放图片；鼠标经过轮播图时，自动播放停止
            -->
       <script>
           var imgArr = [
               {
                   src: 'http://p1.music.126.net/4YaMKQZ5UVRzFklcVZjXcQ==/109951168267766752.jpg?imageView&quality=89'
               },
               {
                   src: 'http://p1.music.126.net/sDRfXlvOUsVx5o87oxKo5A==/109951168267554057.jpg?imageView&quality=89'
               },
               {
                   src: 'http://p1.music.126.net/xdK46YZW1eI__3OjGXsucw==/109951168267964406.jpg?imageView&quality=89'
               },
               {
                   src: 'http://p1.music.126.net/Sevs60nRGz0PCKq6iM5umg==/109951168267742401.jpg?imageView&quality=89'
               },
           ]
           // 鼠标经过轮播图时显示按钮，离开时隐藏
           var banner = document.querySelector('#banner');
           var wrap = document.querySelector('#banner_wrap');
           for (var i = 0; i < imgArr.length; i++) {
               var li = document.createElement('li');
               var a = document.createElement('a');
               a.href = '#';
               var img = document.createElement('img');
               img.src = imgArr[i].src;
               img.alt = '';
               a.appendChild(img);
               li.appendChild(a);
               banner.appendChild(li);
           }
           //左箭头
           var left = document.querySelector('.left');
           var right = document.querySelector('.right');
           //小圆点
           var focus = document.querySelector('.focus');
           //所有li
           var images = banner.querySelectorAll('img');
           //图片长度
           var imagesLength = images.length;
           //图片宽度
           var imgWidth = images[0].offsetWidth;
           //动画是否结束
           var animateSuccess = true;
           //当前图片的下标
           var curImgIndex = 0;
           //自动播放时间间隔
           var autoPlayInterval = 3000;
           //遍历li
           for (var i = 0; i < imagesLength; i++) {
               var li = document.createElement('li');
               li.setAttribute('index', i);
               focus.appendChild(li);
               li.addEventListener('click', function () {
                   if (animateSuccess) {
                       animateSuccess = false;
                       var idx = parseInt(this.getAttribute('index'));
                       var interval = idx * imgWidth;
                       animate(banner, -interval, function () {
                           animateSuccess = true;
                       });
                       curImgIndex = idx;
                       setCurrentFocus();
                   }
               })
           }
           //设置圆点背景色
           setCurrentFocus();
           //左箭头
           left.addEventListener('click', function () {
               if (animateSuccess) {
                   //如果当前是第一张，则定位到最后一张
                   if (curImgIndex == 0) {
                       curImgIndex = imagesLength - 1;
                       banner.style.left = -(banner.offsetLeft + imgWidth * curImgIndex) + 'px';
                   } else {
                       animateSuccess = false;
                       animate(banner, banner.offsetLeft + imgWidth, function () {
                           animateSuccess = true;
                       })
                       curImgIndex--;
                   }
                   //设置小圆点
                   setCurrentFocus()

               }
           })
           //右箭头
           right.addEventListener('click', function () {
               if (animateSuccess) {
                   //如果当前最后一张，则定位到第一张
                   if (curImgIndex == imagesLength - 1) {
                       curImgIndex = 0;
                       banner.style.left = (banner.offsetLeft + imgWidth * (imagesLength - 1)) + 'px';
                   } else {
                       animateSuccess = false;
                       animate(banner, banner.offsetLeft - imgWidth, function () {
                           animateSuccess = true;
                       })
                       curImgIndex++;
                   }
                   setCurrentFocus()

               }
           })
           //自动播放定时器
           var autoPlayTimer = setInterval(function () {
               right.click();
           }, autoPlayInterval);

           //鼠标移入移除自动播放定时器
           wrap.addEventListener('mouseenter', function () {
               clearInterval(autoPlayTimer);
               autoPlayTimer = null;
           })
           //鼠标移出开启自动播放定时器
           wrap.addEventListener('mouseleave', function () {
               autoPlayTimer = setInterval(function () {
                   right.click();
               }, autoPlayInterval);
           })
           /*
           *简单的一个左右移动的动画效果，用定时器实现
           */
           function animate(obj, target, callback) {
               clearInterval(obj.timer);
               obj.timer = setInterval(() => {
                   //移动的距离 / 10 == 步长
                   var distance = target - obj.offsetLeft;
                   //步长
                   var step = distance / 10;
                   step = step > 0 ? Math.ceil(distance) : Math.floor(distance);
                   obj.style.left = obj.offsetLeft + step + 'px';
                   //移动到目标位置结束定时器，执行回调函数
                   if (obj.offsetLeft == target) {
                       clearInterval(obj.timer);
                       callback && callback();
                   }
               }, 50)
           }
           //设置当前的小圆圈
           function setCurrentFocus() {
               for (var i = 0; i < focus.children.length; i++) {
                   focus.children[i].style.background = '#FFFFFF';
               }
               focus.children[curImgIndex].style.background = 'red';
           }
       </script>


  
</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
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265

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