js实现普通的轮播图（轮播图实现原理）

js实现普通的轮播图（轮播图实现原理）图4图3上图为文件的目录结构。建立img文件夹，并新建demo.html文件。图2

在网页的广告中，常常存在使用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行是获取图片切换圆点按钮组。83，84行为向左和向右侧切换箭头。此段js 涉及主要知识点是DOM事件和定时器的用法。88行获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，且style.left获取的是字符串，需要用parseInt()取整转化为数字。90行是无限滚动判断。

图7

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

图8

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

图9

图9中145行166行为html代码。147行定义了一个容器holder，为了包含要展示的图片与按钮相关元素。以上代码轮播图主要原理是通过改变图片的偏移量来实现图片的切换。