ネイティブ JavaScript で画像ボタンの切り替え_JavaScript スキルを実装

最初に効果の写真をお見せします

詳細なコードは次のとおりです:

コードをコピー コードは次のとおりです:

function 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:function(id){
return document.getElementById(id);
}、
GetNodeByClassname:function(親,クラス名){
var classElements = new Array();
var els =parent.getElementsByTagName('*');
var elsLen = els.length;
var pattern = new RegExp("(^|\s)" クラス名 "(\s|$)");
for (i = 0, j = 0; i If ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j ;
}
}
return classElements;
}、
GetCss:関数(ノード,値)
{
return node.currentStyle?node.currentStyle[値]:getComputedStyle(node,null)[値];
}、
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 速度 = ( targetValue- val )/8;
速度 = 速度>0?Math.ceil(speed):Math.floor(speed);
if(speed ==0)
{
間隔をクリア (_That.timer)
callback&&callback();
}
その他
                                                                                                Node.style[値] = ( val 速度 ) '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){
            変数 e = e || window.event;
            _that.cancelBubble(e);
            if(_that.nIndex != 0 ) {
                _that.nインデックス--;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    }、
    btnNext:function(){
        var _that = this;
        this.oBtnNext.onclick = function(e){
            変数 e = e || window.event;
            _that.cancelBubble(e);
            if(_that.nIndex != (_that.nScollLen-1) ) {
                _that.nインデックス ;
                _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代番号：

复制代码代码如下:

/*
* HTML 構造は次のようにする必要があります: 外部 ID 名、次のように自分で渡します: id="gy_picSwitch02"、ID 名、自分で付けます
ただし、クラス名 classname
を含め、内部の構造は同じである必要があります。

                                                                                                                                                                                                                                                           ＆lt; li＆gt;＆lt; img src = "images/pic02.jpg" alt = ""＆gt;＆lt;/li＆gt;

＆lt; li＆gt;＆lt; img src = "images/pic04.jpg" alt = ""＆gt;＆lt;/li＆gt;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

パラメータ: 'wrapID':'xxxx'、最も外側の ID 名
‘scrollCount’:5、スクロール数

コードをコピーします

コードは次のとおりです:

* */ //インスタンス化 new LGY_picSwitch({'wrapID':'gy_picSwitch','scrollCount':5});

とても便利な機能ですので、ぜひ友達にもお勧めしてください。