Izinkan saya menunjukkan gambar tampilan efek terlebih dahulu
Berikut ini adalah kode terperinci:
Salinan kode adalah sebagai berikut:
fungsi lgy_picswitch (opsi) {
this.owrap = this.getId (option.wrapid); // Elemen terluar
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 total gambar
this.nscollCount = option.scrollcount; // Jumlah gulungan per waktu
this.nscolllen = math.ceil (this.nlen/option.scrollcount); // Ganti nilai maksimum penilaian
this.nswitchwidth = 0; // Jarak bergerak setiap kali Anda beralih, dan secara dinamis mendapatkan nilai dalam kode
this.nindex = 0; // Ganti indeks gambar saat ini
this.timer = null; // Ganti nilai kutipan gambar
this.int ();
}
Lgy_picswitch.prototype = {
getId: function (id) {
return document.getElementById (id);
},
getNodeByClassName: function (Parent, className) {
var classeLements = array baru ();
var els = parent.geteLementsbyTagname ('*');
var elslen = els.length;
var pola = regexp baru ("(^| // s)"+className+"(// s | $)");
untuk (i = 0, j = 0; i <elslen; i ++) {
if (pola.test (els [i] .className)) {
ClassElements [j] = els [i];
j ++;
}
}
mengembalikan ClassElements;
},
getCSS: fungsi (node, nilai)
{
return node.currentstyle? node.currentstyle [nilai]: getComputedstyle (node, null) [value];
},
setCss: function (node, val) {
untuk (var v in val) {
node.style.csStext += ';' +v +':' +val [v];
}
},
moveFn: function (node, value, targetValue, callback) {
var _that = ini;
clearInterval (this.timer);
this.timer = setInterval (function ()
{
var val = parsefloat (_that.getCss (node, value));
var speed = (targetValue-val)/8;
kecepatan = kecepatan> 0? Math.ceil (kecepatan): math.floor (kecepatan);
if (speed == 0)
{
clearInterval (_that.timer);
callback && callback ();
}
kalau tidak
{
node.style [nilai] = (val + kecepatan) + '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 = ini;
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 = ini;
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 () {
// Secara dinamis mendapatkan lebar gerakan
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;
// Tombol Tampilkan Inisialisasi
this.btnisshow ();
// Beralih ke kiri dan kanan
this.btnprev ();
this.btnnext ();
}
}
Kode HTML:
Salinan kode adalah sebagai berikut:
/*
* Struktur html harus sebagai berikut: nama ID luar, lewati sebagai berikut: id = "gy_picswitch02", nama id, berikan kepada Anda dengan santai
Namun, struktur di dalamnya harus sama, termasuk nama kelas
<Div id = "gy_picswitch02">
<span> </span>
<span> </span>
<div>
<ul>
<li> <img src = "gambar/pic01.jpg"> </li>
<li> <img src = "gambar/pic02.jpg"> </li>
<li> <img src = "gambar/pic03.jpg"> </li>
<li> <img src = "gambar/pic04.jpg"> </li>
<li> <img src = "gambar/pic05.jpg"> </li>
<li> <img src = "gambar/pic06.jpg"> </li>
<li> <img src = "gambar/pic07.jpg"> </li>
<li> <img src = "gambar/pic08.jpg"> </li>
</ul>
</div>
</div>
Parameter: 'Wrapid': 'xxxx', nama ID terluar paling
'ScrollCount': 5, jumlah gulungan
Salinan kode adalah sebagai berikut:
*
*/
// Instantiasi
baru lgy_picswitch ({'wrapid': 'gy_picswitch', 'scrollcount': 5});
Apakah ini fungsi yang sangat nyaman? Ini juga sangat mudah digunakan. Saya merekomendasikannya kepada teman -teman saya di sini, saya harap ini akan membantu semua orang