今日完成：

 做完首页。（轮播图部分有问题）

 首页 网址：

 http://qxw1192140093.my3w.com/task7/t1.html  密码：Helloworld147

 task7全部上传github：

 https://github.com/seawater-honey/task/tree/master/task7

明天计划：

开始task8..

遇到问题：

1.轮播图部分有问题，页面显示不出轮播效果，跪求师兄解答 T_T：

HTML部分：

<!---轮播图--->
<div class="main">
    <div class="banner" style="left:-100%; width:400%;"><!---图片右平移---->
        <div><img src="images/banner1.png"></div>
        <div><img src="images/banner-2.jpg"></div>
        <div><img src="images/banner-3.jpg"></div>
        <div><img src="images/banner-4.jpg"></div>
    </div>
    <div class="left">
        <img src="images/button1.png">
    </div>
    <div class="right">
        <img src="images/button2.png">
    </div>
</div>

CSS部分：

.main{
    position: relative;
    width: 100%;
    min-width: 1349px;
    min-height: 425px;
    overflow: hidden;
    margin: 0 auto;
}
.banner{
    position: absolute ;
    transition: all 0.5s ease-in 0s;/*过渡效果*/
    -moz-transition:all 0.5s ease-in 0s; /* Firefox 4 */
    -webkit-transition:all 0.5s ease-in 0s; /* Safari and Chrome */
}
.banner div{
    width:25%;
    float: left;
    text-align: center ;
}
.left{
    max-width: 40%;
    position: absolute;
    top:43%;
    left:13%;
}
.right{
    max-width: 40%;
    position: absolute;
    top:43%;
    left:87%;
}

JS部分（这部分是照古尘师姐的粘贴修改的，感觉JS部分我修改的并不对。。）

<script>
    (function () {
        var banner = document.querySelector(".banner");
        var img = banner.querySelectorAll("div");
        var len = img.length;
        [].forEach.call(img, function (item) {
            item.style.width = (100 / len) + "%";
        });
        banner.style.left = "0%";
        banner.style.width = (100 * len) + "%";
        var left = document.querySelector(".left");
        var right = document.querySelector(".right");
        var i = 0;
        left.onclick = function () {
            var left = banner.style.left;
            if (i < len - 1) {
                banner.style.left = (parseInt(left) - 100) + "%";
                i++;
            }
            else if (i == len - 1) {
                banner.style.left = "0%";
                i = 0;
            }
        };
        left.onclick = function () {
            var left = banner.style.left;
            if (i > 0) {
                banner.style.left = (parseInt(left) + 100) + "%";
                i--;
            } else if (i == 0) {
                banner.style.left = -parseInt(banner.style.width) + 100 + "%";
                i = len - 1;
            }
        };
    }());
</script>

收获：

认识了

transition: all 0.5s ease-in 0s;/*过渡效果*/
-moz-transition:all 0.5s ease-in 0s; /* Firefox 4 */
-webkit-transition:all 0.5s ease-in 0s; /* Safari and Chrome */