如何用JavaScript编写简易的图片轮播功能？

本文共计1671个文字，预计阅读时间需要7分钟。

轮播图是什么？

轮播图：在模块或窗口中，通过电脑鼠标点击或手机手指滑动，可以查看多张图片。这些图片就是轮播图，模块被称为轮播模块。

轮播图是什么？

轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。

如何实现轮播图

如何才能在js里面做成一个轮播图呢，比如下面这种的，可以自动生成图片对应的小圆点、点击左右箭头可以跳到上或下一张图片、每隔几秒自动轮播，还可以点击小小圆点去到指定的图片。

HTML结构

首先我们创建一个HTML页面，这个结构很简单，用一个大的div嵌套两个div，取个名字叫slider，上面的div用来装图片，取个名字叫slider-img，下面的div就是控件，用来装上下张图片的按钮和小圆点，这个就叫做slider-ctrl。