Javascript natif implémente les compétences de commutation de bouton d'image_javascript

Laissez-moi d'abord vous montrer l'image de l'effet

Voici le code détaillé :

Copier le code Le code est le suivant :

fonction LGY_picSwitch(option){
This.oWrap = this.getId(option.wrapID); //Élément le plus externe
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 //Nombre total d'images
This.nScollCount = option.scrollCount; //Le numéro de chaque parchemin
This.nScollLen = Math.ceil(this.nLen/option.scrollCount); // Valeur maximale du jugement de commutation
This.nSwitchWidth = 0; //La distance déplacée à chaque fois que vous changez, et la valeur est obtenue dynamiquement dans le code
This.nIndex = 0; //Changer l'index actuel de l'image
This.timer = null; //Changer la valeur de référence de l'image
This.int();
>
LGY_picSwitch.prototype = {
GetId:fonction(id){
           return document.getElementById(id);
},
GetNodeByClassname:function(parent,classname){
        var classElements = new Array();
         var els = parent.getElementsByTagName('*');
var elsLen = els.longueur;
          var pattern = new RegExp("(^|\s)" classname "(\s|$)");
pour (i = 0, j = 0; i < elsLen; i ) {
Si ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
                                  j ;
                }
>
          return classElements;
},
GetCss:fonction(nœud,valeur)
{
           return node.currentStyle?node.currentStyle[value]:getComputedStyle(node,null)[value];
},
setCss:fonction(noeud,val){
pour(var v dans val){
                 node.style.cssText = ';' v ':' val[v];
>
},
​ moveFn:function(node,value,targetValue,callback){
        var _that = ceci;
          clearInterval(this.timer);
This.timer = setInterval(function()
            {
            var val = parseFloat(_that.getCss(node,value));
            var speed = ( targetValue-val )/8;
Vitesse = vitesse>0?Math.ceil(speed):Math.floor(speed);
                if(speed ==0)
                {
Clearinterval (_That.timer);
                   rappel&&callback();
            }
          autre
                                                                                                Node.style[value] = (val speed) 'px';             }
           
        },20);
    },
    picChange:fonction(){
        this.moveFn(this.oUl,'marginLeft',-this.nIndex*this.nSwitchWidth);
    },
    CancelBubble:fonction(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:fonction(){
        var _that = ceci;
        this.oBtnPrev.onclick = fonction(e){
            var e = e || window.event;
            _that.cancelBubble(e);
            si(_that.nIndex != 0 ) {
                _that.nIndex--;
                _that.picChange();
                _that.btnIsShow();
            >
        >
    },
    btnSuivant:fonction(){
        var _that = ceci;
        this.oBtnNext.onclick = fonction(e){
            var e = e || window.event;
            _that.cancelBubble(e);
            if(_that.nIndex != (_that.nScollLen-1) ) {
                _that.nIndex ;
                _that.picChange();
                _that.btnIsShow();
            >
        >
    },
    int:fonction(){
        //动态获取移动的宽度
        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：

复制代码 代码如下 :

/*
* La structure HTML doit être la suivante : nom d'ID externe, transmettez-le vous-même, tel que ceci : id="gy_picSwitch02", nom d'ID, donnez-le vous-même
Cependant, la structure à l'intérieur doit être la même, y compris le nom de la classe classname

                                                                                                                                                                                                                                                                                                                                                                                       

                        

                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

Paramètre : 'wrapID' : 'xxxx', le nom d'ID le plus externe
'scrollCount' :5, le nombre de parchemins

Copier le code

Le code est le suivant :

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

N'est-ce pas une fonction très pratique ? Elle est également très simple à utiliser, je la recommande à mes amis. J'espère qu'elle sera utile à tout le monde
.