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的值是根据你图片的数量来规定的

最后还有两步：

 

最终成果：

 

总结：

轮播图比较复杂，主要是要搞懂其中的函数，需要多看多理解。

 

最后附上 关于轮播图 的所有代码：