JS/jQuery轮播图制作

如今许多网站都采用轮播图效果，既可使用现成组件，也能自行开发。作为程序员，往往更倾向于亲手实现一个属于自己的轮播图功能。

1、 HTML页面源码

2、 CSS样式设计

3、 *{

4、 }

5、 }

6、 }

7、 ul{

8、 }

9、 }

10、 }

11、 完成HTML与CSS编写后，接下来分析轮播图的实现需求。

12、 页面加载时仅显示首张图片，其余图片默认隐藏。

13、 显示第一个类名为ig的元素，其余同级元素全部隐藏。

14、 图片每隔4秒自动切换一次，即4000毫秒轮播。

15、 每隔一段时间重复执行指定的方法function(){}

16、 图片轮播时，红色背景需同步切换。

17、 当录播播放至对应图片时，为下方序号添加背景样式，其余序号则移除该样式。

18、 鼠标悬停序号时显示对应图片并暂停轮播，移开后恢复轮播。

19、 鼠标悬停时触发第一个操作，移开后执行第二个操作。

20、 先获取鼠标悬停位置对应的索引值

21、 第五个需求：支持左右键点击操作

22、 点击前暂停轮播并清除自动播放

23、 重写JS代码，中文表述

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、 第i张图片显示，其他图片隐藏。

49、 轮播至某张图片时，为对应序号添加背景样式，其余序号则移除该样式。

50、 }

51、 轮播执行流程

52、 图片每4秒自动切换一次

53、 每隔指定时间重复执行前面的方法函数。

54、 {

55、 }

56、 轮播结束

57、 }