js进阶，轮播图实现原理

在网页的广告中，常常存在使用js代码实现图片轮播功能，在电商类网站中常遇到的开发任务，轮播广告效果通常的应用场景：企业宣传、产品促销、大事记展示等等。下面用精简的100多行的代码实现了5图轮播广告效果，当然，下面代码使用一种原生js的写法(还会有jquery的写法，vue的写法等)。作为js的进阶，原生写法可以锻炼js的编程水平，及html,css，js的混合编程能力。

附代码及其讲解：图1

上图为文件的目录结构。建立img文件夹，并新建demo.html文件。图2

图3

图4

图5

从第6行到77行结束为页面的css代码。此处css主要是标签选择器，类选择器，及其属性与值，看不懂的，需学习css基础教程。图6

上图中，79行的window.onload该方法用于在网页加载完毕后立刻执行的操作,即当html加载完毕后,立刻执行functiona()方法，80行到84行中的documnet.getElementById()是获取页面需要操作的元素(这句看不懂的需要，重新学习javascript基础教程)。80行是为取得轮播图父容器，81行是为取得图片列表。82行是获取图片切换圆点按钮组。

此图中106行是重复执行的定时器图8

此图中131行这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去搜索js中this的用法。由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性，133行这个index是当前图片停留时的index。图9