今天完成的任务

a.轮播的学习与拆分

b.独立写了一个轮播

c.任务页面的编写（完成度40%）

明天的计划

a.任务14~15 第一，二个任务的编写

b.拓展知识

遇到的问题

a.跟昨天一样，一图流！这样就省去很多地方来描写了。

b.编写的时候来是会出现的问题的，所以再重新回顾一下流程

开始的html代码

上面可以看出，轮播图的html还是挺平平无奇的，总体分3个盒子：

1.最大的div也就是section 用来包裹所有的盒子并设置最为总体的主要样式属性；

2.然后分成2个主要的ul： slider代表的轮播图--- focus代表的轮播焦点-----

3.2个ul在细化分3个li，也就是有3张轮播图和3个轮播焦点（想设置更多就分别加上想要数量的slider-item和focus-item)

重点的css 

仔细观察上面的css不难发现，上面2个css的属性基本雷同，就是一些样式的不同而已，所以拆分一下重点出来就可以很清楚的

理解轮播图的css效果是怎么做出来的

我们再来看一下css 的代码

z-index: 7;

}

上面2个代码都是给上面的2个父元素设置相对（绝对）定位和样式。

接着往下对比，我们渐渐发现

轮播图其他地方样式跟普通做div差不多，只是多了一个animation属性：

那我们来了解一下animation属性：

animation是一个简写的属性，定义是把动画与div绑定，他分6个属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

从这里我们对比一下css的代码。除了 animation-direction 我们没有使用外，其他5个属性我们都用使用了。

然后我们看这个代码

@keyframes的属性一个定位

@keyframes-selector

动画时长的百分比。

0-100%

from（与 0% 相同）

to（与 100% 相同）

，这个轮播实现用的效果是用opacity这个透明度的转换显示从出来的的淡化淡出动画效果来实现这个轮播图的制作，整个动画分为图片停留和淡入淡出两个阶段效果，用下图表示，箭头表示淡入淡出过程。

所以结合上面的所有代码和资料。我们就能一下明白整个动画的原理了：

1.淡入淡出效果肯定是使用opacity，

2.因为css3中没有一个属性是规定两次动画播放的时间间隔，所以我们必须把其他图片淡入淡出时该图片的效果写进动画里，所以未出动画的时候opacity为0；

3.为了方便计算，动画采用固定速度-使用线性函数，也就是用animation-timing-function:linear;

4.整个过程使用12s（采用属性animation-duration:12s)，3张图一张4s,一次停留使用3秒，一次淡入淡出使用1s，折合成百分比也就是8%（省去小数)和24%（基于前面值）；

5.为每张图片添加animation-delay了，因为第一张图片必须显示在最前,所以其他通过相邻兄弟选择器使用opacity:0(解释前面为什么opacity是0)第一张图片开始不需要淡入淡出，直接跳至停留也就是8%，所以animation-delay为-1s，第二章图片和第一张相隔24%，也就是4s，animation-delay为3s，以此类推;

这就是一个完成的轮播图在制作过程，语言表达能力不行，说的也有点不清楚，但是还是希望别人能看完的这个日报后也掌握写出轮播。