1.先分块并加入图片
2.用ul和li标签实现轮播图中的小圆点
float:left; 让li标签横着排列
list-style:none; 去除小圆点
border-radius:10px; 圆形边框
line-height:2px; text-align:center; 左右上下居中
3.将小圆点移动到图片的右下角
需要用到绝对定位（absolute）和相对定位（relative）
play 是不动的，移动的是 ul
4.js函数
mouseover-----当鼠标放到该元素上的后果
· 鼠标放在小圆点上依次变白的代码
其中 siblings() 和 removeClass()
5.把鼠标放在圆点上面然后实现切换图片的效果
（1）图片超出部分隐藏（共4张图片）
(2)鼠标放在圆标上显示对应的照片
7.轮播图实现自动播放
其中1000是1000毫秒，等于1秒
------------------------------------
红框：让小圆点依次变白，时间间隔是1秒
蓝框：让图片依次更替，时间间隔1秒
其实小圆点和图片效果是分开的,只是时间间隔相同，导致呈现效果同步
8.用箭头切换图片
左切换：
右切换：
注意蓝框标的time的值是根据你图片的数量来规定的
最后还有两步：
最终成果：
总结：
轮播图比较复杂，主要是要搞懂其中的函数，需要多看多理解。
最后附上 关于轮播图 的所有代码：