24小时轮播怎么实现的_原生JS实现无缝轮播

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。

需求：

1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏

2.鼠标点击箭头，图片发生轮播

3.点击号码，切换到指定图片

4.鼠标移出，图片每隔一定时间自动轮播

5.当图片轮播到最后或最前一张的时候，图片无缝循环切换

HTML页面结构：这里把图片换成背景颜色了，使用时直接添加图片路径即可

1

2

3

4

5

6

7

8

9

10

11

12 1

13

2

14

3

15

4

16

5

17

18

19