Laissez-moi vous montrer l'image d'affichage d'effet d'abord
Ce qui suit est le code détaillé:
La copie de code est la suivante:
fonction lgy_picswitch (option) {
this.owrap = this.getId (option.wrapid); // l'élément le plus extérieur
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'). Longueur; // Nombre total d'images
this.nscollCount = option.scrollCount; // le nombre de rouleaux par temps
this.nscolllen = math.ceil (this.nlen / option.scrollCount); // change la valeur maximale du jugement
this.nSwitchWidth = 0; // la distance déplacée à chaque fois que vous changez et obtenez dynamiquement la valeur du code
this.Nindex = 0; // change l'index actuel de l'image
this.timer = null; // change la valeur de devis de l'image
this.int ();
}
Lgy_picswitch.prototype = {
getID: fonction (id) {
return document.getElementById (id);
},
getNodeByClassName: function (parent, className) {
var classElements = new Array ();
var els = parent.getElementsByTagName ('*');
var elslen = els.length;
Var Pattern = new regexp ("(^ | // s)" + classname + "(// s | $)");
pour (i = 0, j = 0; i <elslen; i ++) {
if (pattern.test (els [i] .classname)) {
classElements [j] = els [i];
j ++;
}
}
retourner classElments;
},
getcss: fonction (nœud, valeur)
{
return node.currentStyle? node.currentStyle [valeur]: getCompuledStyle (node, null) [valeur];
},
setcss: fonction (noeud, val) {
pour (var v dans val) {
node.style.csstext + = ';' + v + ':' + val [v];
}
},
movefn: function (nœud, valeur, cibleValue, callback) {
var _That = this;
ClearInterval (this.timer);
this.timer = setInterval (function ()
{
var val = parsefloat (_That.getcss (node, valeur));
Var Speed = (TargetValue- Val) / 8;
Speed = Speed> 0? Math.Ceil (Speed): Math.floor (Speed);
si (vitesse == 0)
{
ClearInterval (_That.Timer);
rappel && callback ();
}
autre
{
Node.Style [valeur] = (Val + Speed) + 'PX';
}
}, 20);
},
picchange: function () {
this.movefn (this.oul, 'marginleft', - this.nindex * this.nswitchwidth);
},
CancelBubble: fonction (e) {
E.Stoppropagation? E.Stoppropagation (): e.CancelBubble = true;
},
btnisshow: function () {
this.setcss (this.obtnnext, {'affiche': 'block'});
this.setcss (this.obtnprev, {'affiche': 'block'});
if (this.nindex == 0) this.setcsss (this.obtnprev, {'affiche': 'non'});
if (this.nindex == (this.nscolllen-1)) this.setcss (this.obtnnext, {'affiche': 'Aucun'});
},
btnprev: function () {
var _That = this;
this.obtnprev.onclick = fonction (e) {
var e = e || window.event;
_That.cancelBubble (e);
if (_That.Nindex! = 0) {
_That.Nindex--;
_That.picChange ();
_That.BtNissHow ();
}
}
},
btnnext: function () {
var _That = this;
this.obtnnext.onclick = fonction (e) {
var e = e || window.event;
_That.cancelBubble (e);
if (_That.Nindex! = (_That.nscolllen-1)) {
_That.Nindex ++;
_That.picChange ();
_That.BtNissHow ();
}
}
},
int: function () {
// Obtenez dynamiquement la largeur du mouvement
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;
// Bouton Afficher l'initialisation
this.btnisshow ();
// Communiquez à gauche et à droite
this.btnprev ();
this.btnnext ();
}
}
Code html:
La copie de code est la suivante:
/ *
* La structure HTML doit être la suivante: Nom de l'ID extérieur, passez-le comme suit: id = "gy_picswitch02", nom d'identification, donnez-le avec désinvolture
Cependant, la structure à l'intérieur doit être la même, y compris le nom de classe
<div id = "gy_picswitch02">
<span> </span>
<span> </span>
<div>
<ul>
<li> <img src = "images / pic01.jpg"> </li>
<li> <img src = "images / pic02.jpg"> </li>
<li> <img src = "images / pic03.jpg"> </li>
<li> <img src = "images / pic04.jpg"> </li>
<li> <img src = "images / pic05.jpg"> </li>
<li> <img src = "images / pic06.jpg"> </li>
<li> <img src = "images / pic07.jpg"> </li>
<li> <img src = "images / pic08.jpg"> </li>
</ul>
</div>
</div>
Paramètres: 'wrapid': 'xxxx', le nom d'identification le plus extérieur
'ScrollCount': 5, le nombre de rouleaux
La copie de code est la suivante:
*
* /
// Instanciation
new lgy_picswitch ({'wrapid': 'gy_picswitch', 'scrollCount': 5});
Est-ce une fonction très pratique? Il est également très facile à utiliser. Je le recommande à mes amis ici, j'espère que ce sera utile à tout le monde