轮播组件效果

界面效果如下：

功能：

1）自动播放

2）下方小圆点控制

3）左右按钮控制

4）控制当页面宽度调整（大于1000像素）时始终时轮播组件居中

主要代码解析：

（1）html代码部分

（2）CSS部分（详见代码源文件）：

①关于图片的排放：ul元素中通过对每个li元素设置float为left使所有图片左对齐，实现并排效果，当然这要求ul的宽度足够让所有图片并排，ul的宽度在js中设置。为了改变图片的位置，还应将img设置为relative。

②关于底部圆点选项卡：默认第一个被选中，设置为白色，透明度为1，通过将display设置为inline-block使得不仅能够设置圆点宽高，还能够使其并排。

③关于左右按钮：由圆圈跟箭头组成。鼠标进入轮播图区域将改变按钮的透明度，通过绝对定位使左右按钮放置在录播图组件的两侧，关于箭头的制作用到了CSS3的transform属性。          

（3）JS部分：

①对轮播组件居中的调整

②函数的实现

③自动轮播——定时器

④下方按钮的控制

⑤左右按钮实现切换