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

痛定思痛。 2022-12-15 03:21 155阅读 0赞

## 续上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")