定时器实现图片轮播

1 HTML结构

轮播图主要分为图片、圆点和左右切换这三个部分组成，其中轮播图片有4张，因为在设置自动切换的时候最后会显示空白，因此在最后加上了第一张图片以能够连接而表现持续轮播。

2 CSS样式

2.1 轮播图片

对轮播图中的照片的设置，首先是去除html中放置图片前的无序符号，这里我对背景banner的宽高设置与图片一致，后对于轮播图的位置放置用auto使得左右能够居中，还有就是去除放置所有照片的盒子对其内外边距设置为0，最后就是对每张图片进行float浮动设置，left使其能够横向展示，其中对banner框盒子的设置其overflow样式为hidden，即超出边框的会被隐藏。

2.2 左右切换上下张图

放置左右方向头的颜色设置了偏白色，设置宽高后的背景颜色设置了灰色，这里用text-align对其左右居中，再使用line-height设其与高一致，从而实现完全居中，因为是放置在图片上，因此这里的位置样式设为absolute。左右方向头的设置基本一致，就是对其位置设定分别用left、right和top用以像素或百分比进行估算。

2.3 小圆点

在先设置好其宽高后，对border-radius设置为50%就可实现圆形的样式，这里初始圆点的背景颜色是白色，对每个小圆点的进行float样式的left设置则可以使其横向分布；对存放小圆点的盒子的设置主要是其position的绝对定位；因为要实现显示当前图片时该小圆点变红，所以设其动态变化的背景颜色为红色。

3 JavaScript

3.1 轮播图

先设置了一个移动变量left和定时器timer，做移动函数run，通过marginleft进行移动，先用if函数设其4张图片轮播完后的跳转至第一张，添加变量n滚动一张图片是2s，每0.01s运行一次run，最后赋值给timer。

3.2 左右切换上下张图

先获取左右切换的这两个元素，做一个可以定位到指定图片的函数changeImg，测试这两个按钮的单击事件效果，在左边点击跳转上一张按钮中，通过获取当前位置，再减去1，就是上一张，因为第一张图片没有上一张，所以用if设置第一张的上一张跳转是第四张。右边切换下一张同理。

3.3 小圆点

3.3.1 小圆点跟随图片滚动变红

获取dots元素，其中有4个li元素，创造一个圆点跟随图片变化的changeDot函数，通过for循环将圆点的动态红色背景色清空，并将其当前所在的小圆点设置背景色为红色，通过变量m获取当前图片的序号，在run函数中调用changeDot实现小圆点的跟随变化。

 

3.3.2 点击小圆点定位

先获取所有圆点元素，创建小圆点的点击事件，td1获取事件的目标元素，通过dd获取点击的小圆点中的序号，点击后可切换图片和切换小圆点。

 

 3.4 鼠标悬停静止

先获取图片列表元素，onmounseover中用clearTimeout清除其定时器timer，使得鼠标在图片列表上时轮播停止，onmouseout中重新调用run函数使得鼠标移开后又能继续启动轮播。