今天完成的事情：

   今天在继续写轮播图，还未完成
明天计划的事情：

   明天继续完成轮播图
遇到的问题：

   总是出现一些不可调节的bug,因为有些标签或者属性之前没接触过，不明白可以实现什么功能
收获：

基本需求分析

由于css无法做到js一样的精准操控，所有某些效果是无法实现的，比如在轮播的同时支持用户左右滑动，所以使用css只能实现基本的效果。下面列出来的内容就是我们实现的：

在固定区域中，内部内容自行滑动切换形成播放的效果

当切换到最后一张内容时，会反向播放或者回到起点重播

每张内容会停留一段时间，让用户能够看清楚

内容可以点击/进行操作

首先要有一个容器作为轮播图的容器，同时由于要实现滑动切换，所以内部需要有一个装载所有待切换内容的子容器

如果子容器中的内容是左右切换的，则需要将内容左右排列开

下面以轮播图片为例，上代码

<div>

    <div>

        < img src="darksky.jpg" alt="">

        < img src="starsky.jpg" alt="">

        < img src="whiteland.jpg" alt="">

        < img src="darksky.jpg" alt="">

        < img src="starsky.jpg" alt="">

    </div>

</div>

.loop-wrap 是主容器

.loop-images-container 是承载内部图片的子容器

.loop-image 是图片内容，如果需要显示其他内容，可以自定义

css实现静态效果

轮播图内每一页内容的宽高应该相同，且等于主容器.loop-wrap宽高

css实现轮播效果

轮播效果说到底就是一个动画效果，而通过css3的新属性 animation 我们就可以自定义一个动画来达到轮播图效果。下面先来了解一下 animation 这个属性

/*

animation: name duration timing-function delay iteration-count direction

name: 动画名

duration： 动画持续时间 设置为0则不执行

timing-function：动画速度曲线

delay：动画延迟开始时间 设置为0则不延迟

iteration-count：动画循环次数 设置为infinite则无限次循环

direction：是否应该轮流反向播放动画 normal 否 alternate 是

*/

animation 的 name 值是动画名，动画名可以通过 @keyframes 创建自定义动画规则