SoFunction
Updated on 2025-04-10

Native JavaScript to realize image button switching


function LGY_picSwitch(option){
= (); //The outermost element
    = (,'gy_picSwitch_listWrap')[0];
    = ('ul')[0];
    = (,'gy_picSwitch_prev')[0];
    = (,'gy_picSwitch_next')[0];
= ('li').length; //Total number of pictures
= ; //The number of scrolls per time
= (/); // Switch the maximum value of the judgment
= 0; //The distance moved each time, and dynamically get the value in the code
= 0; //Switch the current index of the picture
= null; //Switch the image's quotation value
    ();
}
LGY_picSwitch.prototype = {
    getId:function(id){
        return (id);
    },
    getNodeByClassname:function(parent,classname){
        var classElements = new Array();
        var els = ('*');
        var elsLen = ;
        var pattern = new RegExp("(^|\\s)"+classname+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( (els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
    },
    getCss:function(node,value)
    {
        return ?[value]:getComputedStyle(node,null)[value];
    },
    setCss:function(node,val){
        for(var v in val){
            += ';'+ v +':'+val[v];
        }
    },
    moveFn:function(node,value,targetValue,callback){
        var _that = this;
        clearInterval();
        = setInterval(function()
        {
            var val = parseFloat(_that.getCss(node,value));
            var speed = ( targetValue- val )/8;
            speed = speed>0?(speed):(speed);
            if(speed ==0)
            {
                clearInterval(_that.timer);
                callback&&callback();
            }
            else
            {                   
                [value] = ( val + speed ) +'px';                   
            }
           
        },20);
    },
    picChange:function(){
        (,'marginLeft',-*);
    },
    cancelBubble:function(e){
        ?(): = true;
    },
    btnIsShow:function(){
        (,{'display':'block'});
        (,{'display':'block'});
        if( == 0 ) (,{'display':'none'});
        if( ==(-1) ) (,{'display':'none'});
    },
    btnPrev:function(){
        var _that = this;
        = function(e){
            var e = e || ;
            _that.cancelBubble(e);
            if(_that.nIndex != 0 ) {
                _that.nIndex--;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    },
    btnNext:function(){
        var _that = this;
        = function(e){
            var e = e || ;
            _that.cancelBubble(e);
            if(_that.nIndex != (_that.nScollLen-1) ) {
                _that.nIndex++;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    },
    int:function(){
//Dynamicly obtain the width of the movement
        var oLi = ('li')[0],
            oLi_w = + parseInt((oLi,'marginLeft')) + parseInt((oLi,'marginRight'));
        = oLi_w*;
//Button display initialization
        ();
//Switch left and right
        ();
        ();
    }
}