네이티브 자바스크립트는 이미지 버튼 전환_자바스크립트 기술을 구현합니다.

효과 사진 먼저 보여드릴게요

상세 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

함수 LGY_picSwitch(옵션){
This.oWrap = this.getId(option.wrapID); //가장 바깥쪽 요소
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; //총 사진 수
This.nScollCount = option.scrollCount; //각 스크롤 수
This.nScollLen = Math.ceil(this.nLen/option.scrollCount); // 전환 판단의 최대값
This.nSwitchWidth = 0; //전환할 때마다 이동한 거리이며, 그 값은 코드에서 동적으로 얻어집니다
This.nIndex = 0; //현재 이미지 인덱스 전환
This.timer = null; //사진의 기준값 전환
This.int();
}
LGY_picSwitch.prototype = {
GetId:함수(id){
           return document.getElementById(id);
},
GetNodeByClassname:함수(부모,클래스 이름){
        var classElements = new Array();
         var els = parent.getElementsByTagName('*');
var elsLen = els.length;
          var 패턴 = new RegExp("(^|\s)" 클래스 이름 "(\s|$)");
for (i = 0, j = 0; i If ( 패턴.테스트(els[i].className) ) {
classElements[j] = els[i];
                                 j ;
                }
}
          classElements를 반환합니다.
},
GetCss:함수(노드,값)
{
           return node.currentStyle?node.currentStyle[값]:getComputeStyle(node,null)[값];
},
setCss:함수(노드,발){
for(var v in val){
                 node.style.cssText = ';' v ':' val[v];
}
},
​ moveFn:함수(노드,값,대상값,콜백){
        var _that = this;
         clearInterval(this.timer);
This.timer = setInterval(function()
            {
            var val =parseFloat(_that.getCss(node,value));
            var 속도 = ( targetValue- val )/8;
속도 = 속도>0?Math.ceil(속도):Math.floor(속도);
                if(속도 ==0)
                {
클리어간격(_That.timer)
                   콜백&&콜백();
            }
           그 외
~ Node.style[값] = (값 속도) 'px';             }
           
        },20);
    },
    picChange:함수(){
        this.moveFn(this.oUl,'marginLeft',-this.nIndex*this.nSwitchWidth);
    },
    cancelBubble:function(e){
        e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
    },
    btnIsShow:함수(){
        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:함수(){
        var _that = this;
        this.oBtnPrev.onclick = 기능(e){
            var e = e || window.event;
            _that.cancelBubble(e);
            if(_that.nIndex != 0 ) {
                _that.n색인--;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    },
    btnNext:함수(){
        var _that = this;
        this.oBtnNext.onclick = 함수(e){
            var e = e || window.event;
            _that.cancelBubble(e);
            if(_that.nIndex != (_that.nScollLen-1) ) {
                _that.n인덱스 ;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    },
    int:함수(){
        //动态获取移动적 크기
        var oLi = this.oUl.getElementsByTagName('li')[0],
            oLi_w = oLi.offsetWidth 구문 분석기(this.getCss(oLi,'marginLeft')) 구문 분석기(this.getCss(oLi,'marginRight'));
        this.nSwitchWidth = oLi_w*this.nScollCount;
        //按钮显示初始化
        this.btnIsShow();
        //左右切换
        this.btnPrev();
        this.btnNext();
    }
}

 
 HTML대명:

复代码 代码如下:

/*
* HTML 구조는 다음과 같아야 합니다. 외부 ID 이름, 직접 전달하세요. 예: id="gy_picSwitch02", ID 이름, 직접 입력하세요
단, 클래스명 classname
을 포함하여 내부 구조는 동일해야 합니다.

> ~                                         ~       

                       

~              

~                                      ~                                       ~                                              ~                                  >

매개변수: 'wrapID':'xxxx', 가장 바깥쪽 ID 이름
'scrollCount':5, 스크롤 수

코드 복사

코드는 다음과 같습니다.

* */ //인스턴스화 new LGY_picSwitch({'wrapID':'gy_picSwitch','scrollCount':5});

정말 편리한 기능이죠? 사용하기에도 매우 간단해서 친구들에게 추천해드리고 싶어요