今天完成的事情：

1.今天完成任务14的轮播图，下拉菜单的组建
明天计划的事情：

2.完成任务14
遇到的问题：

纯CSS做不出带点击的轮播图，还是得用JS做，可是传统的做法将所有图片放成一列，会在点击不连在一起的小点的时候造成过渡不正常，不能像修真院主页那样点击任何一个点，过渡的都非常流畅不会有其他的图划过去。
收获：

利用css的动画效果与JS相结合，做出一个完美过渡的轮播图，代码如下：

js部分

window.onload=function(){
    var picfram = document.getElementById('banner');
    var pics = document.getElementsByClassName('mainpic')[0].children;
    var dots = document.getElementsByClassName('dot')[0].getElementsByTagName('li');
    var btnL = document.getElementsByClassName('btn-left')[0];
    var btnR = document.getElementsByClassName('btn-right')[0];
    var timer = null;
    var tl ="TurnLeft";
    var tr ="TurnRight";
    var cur = 0;
    picfram.onmouseenter = function(){
        clearInterval(timer);
    };
    picfram.onmouseleave = function(){
        clearInterval(timer);
        timer = setInterval(function(){
            btnR.onclick();
        },2000);
    };
    btnL.onclick = function(){
        var last = cur;
        cur = (cur==0)?pics.length-1:--cur;
        console.log(cur);
        tab(pics[cur],pics[last],tl);
    };
    btnR.onclick = function(){
        var last = cur;
        cur = (cur==pics.length-1)?0:++cur;
        console.log(cur);
        tab(pics[cur],pics[last],tr)
    };
    for(var i =0;i<dots.length;i++){
        dots[i].index = i;
        dots[i].onclick = function(){

            if(cur>this.index){
                var last = cur;
                cur = this.index;
                tab(pics[cur],pics[last],tl);
            }
            else if(cur<this.index){
                var last = cur;
                cur = this.index;
                tab(pics[cur],pics[last],tr);
            }
        };
    }
    function tab(curitem,item,direction){
        item.style.animation =  direction +" 1s forwards"
        curitem.style.animation = "cur"+ direction +" 1s forwards"
        for(var j=0;j<dots.length;j++){
            dots[j].className="";
        }
        dots[cur].className="active";
    }
    timer = setInterval(function(){
        btnR.onclick();
    },2000);
};

css动画部分

@keyframes TurnRight {
  from{
    transform: translateX(0);
    z-index: 1;
  }
  to{
    transform: translateX(100%);
    z-index: 1;
  }
}
@keyframes curTurnRight {
  from{
    transform: translateX(-100%);
    z-index: 2;
  }
  to{
    transform: translateX(0);
    z-index: 2;
  }
}
@keyframes TurnLeft {
  from{
    transform: translateX(0);
    z-index: 1;
  }
  to{
    transform: translateX(-100%);
    z-index: 1;
  }
}
@keyframes curTurnLeft {
  from{
    transform: translateX(100%);
    z-index: 2;
  }
  to{
    transform: translateX(0);
    z-index: 2;
  }
}