今天完成的事情：1.完成任务15-1,15-2,15-3.css任务结束。

明天计划的事情：1.完成随机抽取三个盒子功能

2.完成随机抽取3种颜色功能。

遇到的困难：主要还是轮播图功能。刚开始以为很简单，等到自己写的时候，感觉真的很难，在网上找jq插件以目前的实力只能实现固定图片宽度的轮播图，不能满足任务9的要求。

我查到的css代码如下

<style>
    ul, ol { padding: 0;}
    .banner { position: relative; overflow: auto; text-align: center;}
    .banner li { list-style: none; }
    .banner ul li { float: left; }
    #b04 { width: 640px;}
    #b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
    #b04 .dots li
    {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 4px;
        text-indent: -999em;
        border: 2px solid #fff;
        border-radius: 6px;
        cursor: pointer;
        opacity: .4;
        -webkit-transition: background .5s, opacity .5s;
        -moz-transition: background .5s, opacity .5s;
        transition: background .5s, opacity .5s;
    }
    #b04 .dots li.active
    {
        background: #fff;
        opacity: 1;
    }
    #b04 .arrow { position: absolute; top: 200px;}
    #b04 #al { left: 15px;}
    #b04 #ar { right: 15px;}
</style>

html代码

<div class="banner" id="b04">
    <ul>
        <li><img src="task8-1-1.jpg" alt="" width="640" height="480" ></li>
        <li><img src="task8-1-2.jpg" alt="" width="640" height="480" ></li>
        <li><img src="task8-1-3.jpg" alt="" width="640" height="480" ></li>
    </ul>
    <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>
    <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a>
</div>

js代码

<script>
    $(document).ready(function(e) {
        var unslider04 = $('#b04').unslider({
                dots: true
            }),
            data04 = unslider04.data('unslider');

        $('.unslider-arrow04').click(function() {
            var fn = this.className.split(' ')[1];
            data04[fn]();
        });
    });
</script>

最后就只能达到

轮播图效果，不能让图片全屏。。。

收获：主要还是熟悉了一下轮播图代码，还有代码规范。

由于github上传失败，还是明天展示任务15。