今天完成了什么：

完成头部轮播图制作；

遇到了什么问题：

暂无；

收获了什么：

总结几种方法吧：

第一種demo：此种方法需要微调图片大小， 拥有左右箭头和底部的轮播小圆点，小圆点会随着图片的变化而变动，点击图片也会切换下一张；

第二种方法：有轮播焦点，但是不能控制播放速度，只能他自己变；

• 通过css3的动画属性对轮播进行实现，缺点是不灵活，只能是写死的几张图片，另外无法拖动；

代码如下：

css：

　　　　.slider-container充当容器并将其设置为relative以充当一个定位，为了图片能够自适应轮播器的宽度，我们将图片通过background-image来进行设置，同时设置background-size为100%。另外，设置图片的高度显然是不合理的，上面我们通过设置padding-bottom来显示图片相应高度的区域(利用背景在padding中也可以呈现)。

　　　　因为css不能设置每两张的一个间隔时间，对于我们要应用的动画，我们将每一张图片都考虑进去。对于每一张图片，都会经历这样一个过程，我们假设图片1s内从透明过渡为不透明，然后保持显示状态3秒，然后再通过1s从不透明过渡为透明，这样，我们在上面的图片中进行了每张图片的一个动画推演，图片2在图片1开始隐藏时开始动画过程，图片3在图片2开始隐藏时开始动画过程，以此类推，最后发现轮播完全部5张图片时，总共需要花费20秒，也就是说，每张图片在完成一个动画过程后还需要等待15s才会重新执行该动画过程。

第三种方法：此种触摸右下角会自动切换图片；通过css3的动画属性对轮播进行实现，缺点是轮播索引不能实时滚动，索引触发滚动后不能从当前轮播图片轮播，而是从第一张图片开始，同时也存在demo1中的缺点；

ｈｔｍｌ：

ｃｓｓ：

明天计划：

继续任务；