window.onload=function(){
    var imgArr=[
  
    ];
    var size=[
        {"top":60,"left":0,"width":700,"height":450,"zIndex":3,"opacity":0,"font-size":1,},
        {"top":60,"left":0,"width":700,"height":450,"zIndex":3,"opacity":100,"font-size":1,},
        {"top":0,"left":200,"width":1000,"height":570,"zIndex":4,"opacity":100,"font-size":18,},
        {"top":60,"left":700,"width":700,"height":450,"zIndex":3,"opacity":100,"font-size":1,},
        {"top":60,"left":0,"width":700,"height":450,"zIndex":3,"opacity":0,"font-size":1,},
    ];  
  



    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+')';
        $(".content li").removeClass("active");
        $(this).removeClass("cross");
        cont.appendChild(lis);
    }
    var liArr=cont.children;
    move();
    wrap.timer=setInterval(function(){
        move(true);
    },speed);
    btnArr[1].onclick=function(){
        $(".content li").removeClass("active");
        $(this).removeClass("cross");
        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;
            });
        }
    }
}