实现京东轮播图实现（二）

续上jd-JavaScript全部代码

function Banner(){
this.img = document.querySelectorAll(".banner .box a");
this.left = document.getElementById(“left”);
this.right = document.getElementById(“right”);
this.span = document.querySelectorAll(".banner .num span");
this.Banner = document.querySelector(".ban");

this.index = 0;
this.iprev = NaN;
this.addEvent();

}
Banner.prototype = {
construcyor:Banner,
addEvent : function(){
var that = this;
this.left.onclick = function(){
that.changeIndex(-1);
that.active(that.index);
}
this.right.onclick = function(){
that.changeIndex(1);
that.active(that.index);
}
this.Banner.onmouseover = function(){
that.left.style.display = “block”;
that.right.style.display = “block”;
}
this.Banner.onmouseout = function(){
that.left.style.display = “none”;
that.right.style.display = “none”;
}
for(var i=0;i<this.span.length;i++){
this.span[i].xuhao = i;
this.span[i].onmouseover = function(){
that.active(this.xuhao);
that.isDirect(this);
}
}

},
active : function(m){
    for(var i=0;i<this.span.length;i++){
        this.span[i].className = ""
    }
    this.span[m].className = "active";
},
isDirect : function(iNow){
    if(iNow.xuhao > this.index){
        this.changeImg(iNow,1);
    }
    if(iNow.xuhao < this.index){
        this.changeImg(iNow,-1);
    }
    this.index = iNow.xuhao;
},
changeImg : function(iNow,d){
    this.img[this.index].style.left = 0;
            move(this.img[this.index],{left:-785*d});
            this.img[iNow.xuhao].style.left = 785*d + "px";
            move(this.img[iNow.xuhao],{left:0});
},
changeIndex : function(d){
    if(d === -1){
        if(this.index === 0){
            this.index = this.img.length-1;
            this.iprev = 0;
        }else{
            this.index --;
            this.iprev = this.index + 1;
        }
    }else{
        if(this.index === this.img.length-1){
            this.index = 0;
            this.iprev = this.img.length-1;
        }else{
            this.index ++;
            this.iprev = this.index - 1;
        }
        
    }
    this.showImg(d);
},
showImg : function(d){
    this.img[this.iprev].style.left = 0;
    move(this.img[this.iprev],{left:-785*d});
    this.img[this.index].style.left = 785*d + "px";
    move(this.img[this.index],{left:0});
},

}
new Banner();
function move(ele, data, cb){
clearInterval(ele.t);
ele.t = setInterval(()=>{
var onoff = true;
for(var i in data){
var iNow = i === “opacity” ? getStyle(ele, i) * 100 : parseInt(getStyle(ele, i));

        var speed = (data[i] - iNow) / 10;
        speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);

        if(iNow != data[i]) onoff = false;

        ele.style[i] = i === "opacity" ? (iNow + speed) / 100 : iNow + speed + "px";
    }
    if(onoff){
        clearInterval(ele.t);
        cb && cb();
    }
},30);

}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele, null)[attr];
}
}

var rightnav = document.querySelector(".rightnav");
var denglu = document.querySelector(".denglu");
var i = document.querySelector(".rightnav i")
var banner = document.querySelector(".banner")

var t = rightnav.offsetTop;
var tt = true;
onscroll = function(){
rightnav.style.top=document.documentElement.scrollTop + t + “px”;
}
denglu.onclick = function(eve){
var e = eve || window.event;
e.cancelBubble = true;
if(tt){
move(rightnav,{right:0});
tt = false;
}else{
move(rightnav,{right:-276});
tt = true;
}
}
i.onclick = function(eve){
var e = eve || window.event;
e.cancelBubble = true;
move(rightnav,{right:-276});
tt = true;
}
rightnav.onclick = function(eve){
var e = eve || window.event;
e.cancelBubble = true;
}
document.onclick = function(){
move(rightnav,{right:-276});
tt = true;
}