/*封装$*/
// 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=http://www.mamicode.com/‘+imgs[i].img+‘>‘;" ${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();