原生js面向对象-滑动式轮播

  window.$=HTMLElement.prototype.$=function(selector){
        var elems=(this==window?document:this).querySelectorAll(selector);
        if(elems==null){
            return null;
        }else if(elems.length==1){
            return elems[0]
        }else{return elems;}
    }
    var imgs=[
        {'i':0,"img":"img/1.jpg"},
        {'i':1,"img":"img/2.jpg"},
        {'i':2,"img":"img/3.jpg"},
        {'i':3,"img":"img/4.jpg"}
    ];
    var adv={
        LIWIDTH:870,//每个广告图片的宽度
        DURATION:500,//动画总时长
        WAIT:2000,//自动轮播之间等待的时长
        STEPS:150,//动画移动的总步数
        timer:null,//保存当前正在播放的定时器序号
        canAuto:true,//设置是否可以自动轮播

        init:function(){
            var self=this;
            self.updateView();

            //当鼠标进出广告区域时，禁用或启用自动轮播
            $("#slider").addEventListener("mouseover",function(){
                self.canAuto=false;
            },false);
            $("#slider").addEventListener("mouseout",function(){
                self.canAuto=true;
            },false);

            self.automove();//初始化时，就启动自动轮播

            //找到id为indexs的ul，绑定鼠标进入事件
            $("#indexs").addEventListener("mouseover",function(){
                //  获得目标元素target
                var e=window.event||arguments[0];
                var target=e.srcElement||e.target;
                //  如果target是LI，且target.innerHTML-1不等于imgs数组中第一个元素的i属性
                if(target.nodeName=="LI"
                        &&target.innerHTML-1!=imgs[0].i){
                    //      获取id为indexs下class为hover的li对象，清除样式类
                    $("#indexs>.hover").className="";
                    //      将target的className设置为"hover"
                    target.className="hover";
                    //      计算移动个数target的内容-1-imgs数组中第一个元素的i属性，保存在变量n中
                    var n=target.innerHTML-1-imgs[0].i;
                    //      调用move方法启动手动移动，传入n
                    self.move(n);
                }
            },false);
        },
        //移动任意个li的方法——手动轮播
        move:function(n){//n表示要移动的li个数，左移为正
            //停止当前正在运行的timer动画，将timer设置为null
            clearTimeout(this.timer);

            this.timer=null;
            if(n<0){//如果右移
                //  将imgs数组结尾的-n个元素删除后，拼接到imgs数组开头，再保存回imgs中
                imgs=imgs.splice(imgs.length+n,-n).concat(imgs);
                //  调用updateView方法刷新界面
                this.updateView();
                //  设置id为imgs的ul的left为n*LIWIDTH
                $("#imgs").style.left=n*this.LIWIDTH+"px";
            }

            this.moveStep(n);//调用moveStep方法，传入n
        },
        //在移动前后，将imgs数组的内容刷新到页面
        updateView:function(){
            $("#imgs").style.width=//计算ul的总宽度
                    this.LIWIDTH*imgs.length+"px";

            //遍历imgs中每个img对象,同时声明lis和idxs空数组
            for(var i=0,lis=[],idxs=[];i![](当前对象的img)
                lis[i]="
![]("+imgs[i].img+")
"
                //  在idxs中当前位置添加新元素:
i+1
                idxs[i]="
"+(i+1)+"
";
            }//(遍历结束后)
            //设置id为imgs的ul的内容为lis无缝拼接后的结果
            $("#imgs").innerHTML=lis.join("");
            //设置id为indexs的ul的内容为idxs无缝拼接后的结果
            $("#indexs").innerHTML=idxs.join("");

            //找到#indexs下的class为hover的li，清除class
            $("#indexs>.hover").className="";
            //找到#indexs下所有li中下标和imgs数组中第一个对象的i属性相同的li，设置class为hover
            $("#indexs>li")[imgs[0].i].className="hover";
        },
        automove:function(){
            var self=this;//留住this
            //启动一次性定时器，传入匿名函数封装的moveStep方法调用，在moveStep方法中写死参数1，设置时间间隔为WAIT
            self.timer=setTimeout(function(){
                if(self.canAuto){//如果启用了自动轮播
                    self.moveStep(1);//才移动一次
                }else{//如果禁用了自动轮播
                    self.automove();//就反复等待
                }
            },self.WAIT);
        },
        //将ul移动一步
        moveStep:function(n){//n表示要移动的li个数，左移为正
            var self=this;//留住this
            //计算步长：LIWIDTH*n/STEPS，保存在变量step中
            var step=self.LIWIDTH*n/self.STEPS;
            //获得id为imgs的ul计算后的样式，保存在变量style中
            var style=getComputedStyle($("#imgs"));
            //计算新left值:style的left-step，保存在变量left中
            var left=parseFloat(style.left)-step;
            //将新left值设置到id为imgs的ul元素的left属性上
            $("#imgs").style.left=left+"px";
            //如果n>0且新left值>-LIWIDTH*n或n<0且新left值<0
            if(n>0&&left>-self.LIWIDTH*n||n<0&&left<0){
                //  启动下一次定时器，传入匿名函数封装moveStep方法调用，同时传入DURATION/STEPS作为时间间隔
                self.timer=setTimeout(function(){
                    self.moveStep(n);
                },self.DURATION/self.STEPS);
            }else{//否则（说明移动完成）
                //  将id为imgs的ul的left属性重置为0px
                $("#imgs").style.left="0px";
                //  再次调用automove方法，启动自动轮播
                self.automove();
                if(n>0){//  如果n>0 （说明左移）
                    //      从0位置开始删除原imgs数组中n个元素，删除结果直接拼接到imgs上，再保存回imgs变量中
                    imgs=imgs.concat(imgs.splice(0,n));
                    //      调用updateView方法，更新界面
                    self.updateView();
                }
            }
        }
    }
    window.addEventListener("load",function(){
        adv.init();
    },false);

  #slider {
            margin:30px auto;
            width: 870px;
            height:390px;
            position:relative;
            overflow:hidden;
        }
        #slider #imgs {
            position:absolute;
            top: 0;  left: 0;
            height:390px;
        }
        #slider #imgs li{
            float:left;
            z-index:0;
        }
        #slider #indexs {
            position: absolute;
            bottom: 15px;
            right: 30px;

        }
        #slider  img{width:870px;height:390px;}
        #slider #indexs li {
            width: 22px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            background: #3e3e3e;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            cursor: pointer;
            margin-left:10px;
        }
        #slider #indexs li.hover {
            background:#b61b1f ;
        }