Javascript asli melaksanakan kemahiran switching_javascript butang gambar-tutorial js-php.cn

Javascript asli melaksanakan kemahiran switching_javascript butang gambar

WBOY

Lepaskan： 2016-05-16 16:20:59

asal

1458 orang telah melayarinya

Biar saya tunjukkan gambar kesan dulu

Berikut ialah kod terperinci:

Salin kod Kod adalah seperti berikut:

fungsi LGY_picSwitch(pilihan){
This.oWrap = this.getId(option.wrapID); //Elemen paling luar
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').panjang; //Jumlah bilangan gambar
This.nScollCount = option.scrollCount; //Nombor setiap skrol
This.nScollLen = Math.ceil(this.nLen/option.scrollCount); // Nilai maksimum penukaran pertimbangan
This.nSwitchWidth = 0; //Jarak yang digerakkan setiap kali anda bertukar dan nilai diperoleh secara dinamik dalam kod
This.nIndex = 0; //Tukar indeks semasa imej
This.timer = null; //Tukar nilai rujukan gambar
This.int();
}
LGY_picSwitch.prototype = {
GetId:function(id){
           kembalikan document.getElementById(id);
},
GetNodeByClassname:function(ibu bapa,nama kelas){
var classElements = new Array();
         var els = parent.getElementsByTagName('*');
var elsLen = els.length;
          var pattern = new RegExp("(^|\s)" nama kelas "(\s|$)");
untuk (i = 0, j = 0; i < elsLen; i ) {
Jika ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
                              j ;
                }
}
          kembalikan classElements;
},
GetCss:function(nod,value)
{
          kembalikan node.currentStyle?node.currentStyle[value]:getComputedStyle(nod,null)[value];
},
setCss:function(nod,val){
untuk(var v dalam val){
                 node.style.cssText = ';' v ':' val[v];
}
},
moveFn:function(nod,value,targetValue,callback){
var _itu = ini;
          clearInterval(thimer.timer);
This.timer = setInterval(function()
           {
var val = parseFloat(_that.getCss(nod,value));
kelajuan var = ( targetValue- val )/8;
Kelajuan = kelajuan>0?Math.ceil(kelajuan):Math.floor(kelajuan);
                jika (kelajuan ==0)
                {
Clearinterval (_That.timer
                    panggil balik&&panggil balik();
            }
           lain
                                                                                               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 = benar;
    },
    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 _itu = ini;
        this.oBtnPrev.onclick = fungsi(e){
            var e = e || tingkap.acara;
            _that.cancelBubble(e);
            if(_that.nIndex != 0 ) {
                _that.nIndex--;
                _that.picChange();
                _that.btnIsShow();
            }
        }
    },
    btnSeterusnya:function(){
        var _itu = ini;
        this.oBtnNext.onclick = fungsi(e){
            var e = e || tingkap.acara;
            _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代码：

复制代码代码如下:

/*
* Struktur HTML mestilah seperti berikut: nama ID luar, masukkan ke dalam diri anda, seperti berikut: id="gy_picSwitch02", nama ID, berikannya sendiri
Walau bagaimanapun, struktur di dalam mestilah sama, termasuk nama kelas nama kelas

Parameter: 'wrapID':'xxxx', nama ID paling luar

'scrollCount':5, bilangan skrol

Salin kod Kod adalah seperti berikut: *

//Instantiation

LGY_picSwitch baharu({'wrapID':'gy_picSwitch','scrollCount':5});

Bukankah ini fungsi yang sangat mudah untuk digunakan. Saya mengesyorkannya kepada rakan saya. Saya harap ia akan membantu semua orang