Natives Javascript implementiert Javascript-Fähigkeiten zum Umschalten von Bildschaltflächen

Lassen Sie mich Ihnen zuerst das Effektbild zeigen

Das Folgende ist der detaillierte Code:

Code kopieren Der Code lautet wie folgt:

Funktion LGY_picSwitch(option){
This.oWrap = this.getId(option.wrapID); //Äußerstes Element
This.olistWrap = this.getNodeByClassname(this.oWrap,'gy_picSwitch_listWrap')[0];
This.oUl = this.olistWrap.getElementsByTagName('ul')[0];
This.oBtnPrev = this.getNodeByClassname(this.oWrap,'gy_picSwitch_prev')[0];
This.oBtnNext = this.getNodeByClassname(this.oWrap,'gy_picSwitch_next')[0];
This.nLen = this.oUl.getElementsByTagName('li').length; //Gesamtzahl der Bilder
This.nScollCount = option.scrollCount; //Die Nummer jeder Schriftrolle
This.nScollLen = Math.ceil(this.nLen/option.scrollCount); // Maximaler Wert der Umschaltbeurteilung
This.nSwitchWidth = 0; // Die bei jedem Wechsel zurückgelegte Distanz, und der Wert wird dynamisch im Code abgerufen
This.nIndex = 0; //Den aktuellen Index des Bildes wechseln
This.timer = null; //Referenzwert des Bildes wechseln
This.int();
}
LGY_picSwitch.prototype = {
GetId:function(id){
           return document.getElementById(id);
},
GetNodeByClassname:function(parent,classname){
        var classElements = new Array();
         var els = parent.getElementsByTagName('*');
var elsLen = els.length;
          var pattern = new RegExp("(^|\s)" classname "(\s|$)");
für (i = 0, j = 0; i < elsLen; i ) {
If (pattern.test(els[i].className) ) {
classElements[j] = els[i];
                                  j ;
                }
}
          classElements zurückgeben;
},
GetCss:function(node,value)
{
           return node.currentStyle?node.currentStyle[value]:getComputedStyle(node,null)[value];
},
setCss:function(node,val){
for(var v in val){
                 node.style.cssText = ';' v ':' val[v];
}
},
​ moveFn:function(node,value,targetValue,callback){
        var _that = this;
          clearInterval(this.timer);
This.timer = setInterval(function()
           {
            var val = parseFloat(_that.getCss(node,value));
            var speed = ( targetValue- val )/8;
Geschwindigkeit = Geschwindigkeit>0?Math.ceil(speed):Math.floor(speed);
                if(speed ==0)
                {
Clearinterval (_That.timer);
                   callback&&callback();
            }
           sonst
                                                                                           Node.style[value] = (val speed) 'px';             }
           
        },20);
    },
    picChange:function(){
        this.moveFn(this.oUl,'marginLeft',-this.nIndex*this.nSwitchWidth);
    },
    cancelBubble:function(e){
        e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
    },
    btnIsShow:function(){
        this.setCss(this.oBtnNext,{'display':'block'});
        this.setCss(this.oBtnPrev,{'display':'block'});
        if( this.nIndex == 0 ) this.setCss(this.oBtnPrev,{'display':'none'});
        if( this.nIndex ==(this.nScollLen-1) ) this.setCss(this.oBtnNext,{'display':'none'});
    },
    btnPrev:function(){
        var _that = this;
        this.oBtnPrev.onclick = function(e){
            var e = e || window.event;
            _that.cancelBubble(e);
            if(_that.nIndex != 0 ) {
                _that.nIndex--;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    },
    btnNext:function(){
        var _that = this;
        this.oBtnNext.onclick = function(e){
            var e = e || window.event;
            _that.cancelBubble(e);
            if(_that.nIndex != (_that.nScollLen-1) ) {
                _that.nIndex ;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    },
    int:function(){
        //动态获取移动的宽度
        var oLi = this.oUl.getElementsByTagName('li')[0],
            oLi_w = oLi.offsetWidth parseInt(this.getCss(oLi,'marginLeft')) parseInt(this.getCss(oLi,'marginRight'));
        this.nSwitchWidth = oLi_w*this.nScollCount;
        //按钮显示初始化
        this.btnIsShow();
        //左右切换
        this.btnPrev();
        this.btnNext();
    }
}

 
 HTML-Code:

复制代码 代码如下:

/*
* Die HTML-Struktur muss wie folgt aussehen: äußerer ID-Name, übergeben Sie ihn selbst, wie zum Beispiel: id="gy_picSwitch02", ID-Name, geben Sie ihn selbst
Die Struktur im Inneren muss jedoch dieselbe sein, einschließlich des Klassennamens Klassenname

                                                                                                                                                                                                                                                                                                                                                                           

                        

                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

Parameter: 'wrapID':'xxxx', der äußerste ID-Name
„scrollCount“:5, die Anzahl der Schriftrollen

Code kopieren

Der Code lautet wie folgt:

* */ //Instantiierung new LGY_picSwitch({'wrapID':'gy_picSwitch','scrollCount':5});

Ist es nicht eine sehr praktische Funktion? Es ist auch sehr einfach zu verwenden. Ich hoffe, es wird allen helfen