window.onload=function(){
    var imgArr=[

        {"path":"images/teacher1.1.jpg"},
        {"path":"images/teacher3.1.jpg"},
        {"path":"images/teacher5.1.jpg"},
        {"path":"images/teacher2.1.jpg"},
        {"path":"images/teacher6.jpg"},

    ];
    var size=[
   
        {"top":45,"left":190,"width":166,"height":250,"zIndex":2,"opacity":30},
        {"top":20,"left":315,"width":206,"height":310,"zIndex":3,"opacity":60},
        {"top":0,"left":480,"width":233,"height":350,"zIndex":4,"opacity":100},
        {"top":20,"left":670,"width":206,"height":310,"zIndex":3,"opacity":60},
        {"top":45,"left":830,"width":166,"height":250,"zIndex":2,"opacity":30},

    ];
    var imgSum=imgArr.length;
    var wrap=document.getElementById('wrap');
    var cont=wrap.firstElementChild || wrap.firstChild;
    var btnArr=wrap.getElementsByTagName('a');
    var falg=true;
    var speed=7000;
    wrap.onmouseover=function(){
        for (var i=0;i<btnArr.length;i++) {
            btnArr[i].style.display='block';
        }
        clearInterval(wrap.timer);
    }
    wrap.onmouseout=function(){
        for (var i=0;i<btnArr.length;i++) {
            btnArr[i].style.display='none';
        }
        wrap.timer=setInterval(function(){
             move(true);
         },speed);
    }
    for (var i=0;i<imgSum;i++) {
        var lis=document.createElement('li');             
        // lis.style.cssText='top:'+size[i].top+'px;'+'left:'+size[i].left+'px;'+'width:'+size[i].width+'px;'+'z-index:'+size[i].zIndex+';'+'height:'
        // +size[i].height+'px;'+'opacity:'+size[i].opacity+';';
        lis.style.backgroundImage='url('+imgArr[i].path+')';
        cont.appendChild(lis);
    }
    var liArr=cont.children;
    move();
    wrap.timer=setInterval(function(){
        move(true);
    },speed);
    btnArr[1].onclick=function(){
        if (falg) {
            move(true);
        }
    }
    btnArr[0].onclick=function(){
        if (falg) {
            move(false);
        }
    }
    function move(bool){
        if(bool!=undefined){
            if(bool){
                size.unshift(size.pop());
            }else {
                size.push(size.shift());
            }
        }
        for (var i=0;i<liArr.length;i++) {
            animate(liArr[i],size[i],function(){
                falg=true;
            });
        }
    }
}