Native javascript implements image button switching_javascript skills

Let me show you the effect picture first

The following is the detailed code:

Copy code The code is as follows:

function LGY_picSwitch(option){
This.oWrap = this.getId(option.wrapID); //Outermost 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; //Total number of pictures
This.nScollCount = option.scrollCount; //The number of each scroll
This.nScollLen = Math.ceil(this.nLen/option.scrollCount); // Maximum value of switching judgment
This.nSwitchWidth = 0; //The distance moved each time you switch, and the value is dynamically obtained in the code
This.nIndex = 0; //Switch the current index of the image
This.timer = null; //Switch the reference value of the picture
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|$)");
for (i = 0, j = 0; i < elsLen; i ) {
If ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
                                  j ;
                }
}
          return classElements;
},
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;
Speed ​​= speed>0?Math.ceil(speed):Math.floor(speed);
                if(speed ==0)
                {
Clearinterval (_That.timer);
                   callback&&callback();
            }
           else
                                                                                                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代码：

复制代码 代码如下:

/*
* The HTML structure must be as follows: outer ID name, pass it in yourself, such as the following: id="gy_picSwitch02", ID name, give it yourself
However, the structure inside must be the same, including the class name classname

                                                                                                                                                                                                                                                                                                                                                                                           

                        

                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

Parameter: 'wrapID':'xxxx', the outermost ID name
‘scrollCount’:5, the number of scrolls

Copy code

The code is as follows:

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

Isn’t it a very convenient function? It is also very simple to use. I recommend it to my friends. I hope it will be helpful to everyone