今天完成的事情：

今天完成了任务1415，但是轮播图没有做出想要的效果，所以就重新做了一个，能点有动画的，但是还没有完成。
明天计划的事情：

明天放假

遇到的问题：

轮播图一开始虽然能轮播，但是不能点击然后变换，所以就去看网上的教程，然后用动画效果做出来的。

/*创建三种动画策略*/
@-webkit-keyframes slide1 {

    0%,25% {
        margin-left: 0;
    }
    35%, 50% {
        margin-left: -100%;
    }
    60%,100% {
        margin-left: -200%;
    }
}
@-webkit-keyframes slide2 {

    0%,25% {
        margin-left:-100% ;
    }
    35%, 50% {
        margin-left: -200%;
    }
    60%,100% {
        margin-left: 0;
    }
}
@-webkit-keyframes slide3 {

    0%,25% {
        margin-left: -200%;
    }
    35%, 50% {
        margin-left: -100%;
    }
    60%,100% {
        margin-left: 0;
    }
}

要首先创建3种动画效果，第一种从第一张图片开始，第2种从第2张图片开始，以此类推，然后加上lable按钮，关联一起，点击的时候重置并切换它的动画效果，达到点击切换图片的效果，

/*修改动画名称*/
#l01:checked ~ #wrap #slider {
    -webkit-animation-name:slide1;
}

#l02:checked ~ #wrap #slider {
    -webkit-animation-name:slide2;
}

#l03:checked ~ #wrap #slider {
    -webkit-animation-name:slide3;
}


/*短暂地取消动画名称，模拟重启动画*/
#l01:active ~ #wrap #slider {
    -webkit-animation-name:none;
    margin-left:0;
}


#l02:active ~ #wrap #slider {
    -webkit-animation-name:none;
    margin-left:-100%;
}

#l03:active ~ #wrap #slider {
    -webkit-animation-name:none;
    margin-left:-200%;
}

<input type="radio" checked name="slider" id="l01">

用input框关联lable按钮，然后点击切换，改变3个动画名称，导致他不会出错，

然后加上动画效果，然后就开始自动轮播还可以点击，效果很好，按钮的部分，可以改变样式，然后绝对定位到图片上，就做出来需要的效果，

理论基础 CSS3 animation 属性和 @keyframes 规则 主体思想 准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器，展示容器大小为图片大小 给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值 注意事项 动画效果分为切换和停留两部分 自定义动画阶段与图片数量相关 动画各阶段偏移值与图片大小相关  

收获：

今天了解了动画效果，还可以那样用，做出轮播图的效果，收获很多。