/*封装$*/

// window.$=HTMLElement.prototype.$=function(selector){

//     var elems=(this==window?document:this)

//         .querySelectorAll(selector);

//     return elems.length==0?null:elems.length==1?elems[0]:elems;

// }

/*广告图片数组*/

var imgs=[

	{"i":0,"img":"images/index/banner_01.jpg"},

    {"i":1,"img":"images/index/banner_02.jpg"},

    {"i":2,"img":"images/index/banner_03.jpg"},

    {"i":3,"img":"images/index/banner_04.jpg"},

    {"i":4,"img":"images/index/banner_05.jpg"},

];

var adv={

    LIWIDTH:0,

    $ulImages:null,

    INTERVAL:1000,

    WAIT:3000,

    timer:null,

    init:function () {

        this.LIWIDTH=parseFloat($('#slider').css("width"));

        this.$ulImages=$("#imgs");

        this.updateView();

        $("#indexs").on("mouseover","li",(e)=>{

            var target=$("#indexs>li").index(e.target);

            var old=imgs[0].i;

            this.move(target-old);

        });

        this.autoMove();

    },

    autoMove:function(){

        this.timer=setTimeout(

            ()=>this.move(1),this.WAIT

        );

    },

    movePre:function(n){

        n*=-1;

        imgs=imgs.splice(-n,n).concat(imgs);

        this.updateView();

        this.$ulImages.css("left",parseFloat(this.$ulImages.css("left"))-n*this.LIWIDTH);

    },

    move:function (n) {

        clearTimeout(this.timer);

       if(n<0){

           this.movePre(n);

           this.$ulImages.stop(true);

           this.$ulImages.animate({left:0},this.INTERVAL,()=>this.autoMove())

       }else {

           this.$ulImages.stop(true);

           this.$ulImages.animate({left:-n*this.LIWIDTH},this.INTERVAL,

               ()=>this.moveCallback(n)

           );

       }

    },

    moveCallback:function (n) {

        imgs=imgs.concat(imgs.splice(0,n));

        this.updateView();

        this.$ulImages.css("left",0);

        this.autoMove();

    },

    updateView:function(){

        for(var i=0 ,lis='',idxs='';i<imgs.length;i++)

        {

            // lis+='<li> <img src='+imgs[i].img+'></li>';

            lis+=`<li> <img src=" ${imgs[i].img}"></li>`;

            idxs+='<li></li>';

        }

        this.$ulImages.html(lis).css("width",imgs.length*this.LIWIDTH);

        $("#indexs").html(idxs);

        // $("#indexs").children(":nth-child("+imgs[1].i+")").addClass("hover");

        $("#indexs").children(`li:eq(${imgs[0].i})`).addClass("hover");

    }

};

adv.init();