Déjame mostrarte la imagen de visualización del efecto primero
El siguiente es el código detallado:
La copia del código es la siguiente:
función lgy_picswitch (opción) {
this.owrap = this.getId (opción.wrapid); // El elemento más externo
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'). Longitud; // Número total de imágenes
this.nscollcount = option.scrollCount; // El número de pergaminos por tiempo
this.nscolllen = Math.ceil (this.nlen/option.scrollCount); // cambia el valor máximo del juicio
this.nswitchwidth = 0; // La distancia se movía cada vez que cambia y obtiene dinámicamente el valor en el código
this.nindex = 0; // cambia el índice actual de la imagen
this.timer = null; // cambia el valor de cotización de la imagen
this.int ();
}
Lgy_picswitch.prototype = {
getId: function (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 | $)");
para (i = 0, j = 0; i <elslen; i ++) {
if (patrón.test (els [i] .classname)) {
Classelements [j] = els [i];
j ++;
}
}
devolver Classelements;
},
getCSS: función (nodo, valor)
{
return node.CurrentStyle? node.CurrentStyle [valor]: getComputedStyle (nodo, nulo) [valor];
},
setCSS: function (nodo, val) {
para (var v en val) {
node.style.csstext += ';' +v +':' +val [v];
}
},
Movefn: function (nodo, valor, targetValue, devolución de llamada) {
var _that = this;
ClearInterval (this.timer);
this.timer = setInterval (function ()
{
var val = parsefloat (_that.getcss (nodo, valor));
VAR SPEED = (TargetValue- val)/8;
velocidad = velocidad> 0? Math.ceil (velocidad): math.floor (velocidad);
if (velocidad == 0)
{
ClearInterval (_that.timer);
Callback && Callback ();
}
demás
{
node.style [valor] = (val + velocidad) + 'px';
}
}, 20);
},
PicChange: function () {
this.Movefn (this.oul, 'marginleft',-this.nindex*this.nswitchwidth);
},
cancelBubble: function (e) {
E.stoppropagation?
},
btnisshow: functer () {
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: functer () {
var _that = this;
this.obtnprev.onclick = function (e) {
var e = e || Window.event;
_THAT.CANCELBUBBLE (E);
if (_that.nindex! = 0) {
_THAT.NINDEX--;
_that.PicChange ();
_THAT.BTNISSHOW ();
}
}
},
btnnext: functer () {
var _that = this;
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: functer () {
// Obtén dinámicamente el ancho del movimiento
var oli = this.oul.getElementsBytagName ('li') [0],
oli_w = oli.offsetwidth + parseint (this.getcss (oli, 'marginleft') + parseint (this.getcss (oli, 'marginight'));
this.nswitchwidth = oli_w*this.nscollCount;
// Inicialización de visualización de botones
this.btnisshow ();
// Cambiar a la izquierda y a la derecha
this.btnprev ();
this.btnnext ();
}
}
Código HTML:
La copia del código es la siguiente:
/*
* La estructura HTML debe ser la siguiente: Nombre de la identificación exterior, pasarlo de la siguiente manera: id = "Gy_Picswitch02", nombre de ID, dártelo casualmente
Sin embargo, la estructura en el interior debe ser la misma, incluido el nombre de clase
<div id = "gy_picswitch02">
<span> </span>
<span> </span>
<div>
<ul>
<li> <img src = "imágenes/pic01.jpg"> </li>
<li> <img src = "imágenes/pic02.jpg"> </li>
<li> <img src = "imágenes/pic03.jpg"> </li>
<li> <img src = "imágenes/pic04.jpg"> </li>
<li> <img src = "imágenes/pic05.jpg"> </li>
<li> <img src = "imágenes/pic06.jpg"> </li>
<li> <img src = "imágenes/pic07.jpg"> </li>
<li> <img src = "imágenes/pic08.jpg"> </li>
</ul>
</div>
</div>
Parámetros: 'wrapid': 'xxxx', el nombre de ID más externo
'ScrollCount': 5, el número de pergaminos
La copia del código es la siguiente:
*
*/
// Instanciación
nuevo lgy_picswitch ({'wrapid': 'gy_picswitch', 'scrollCount': 5});
¿Es una función muy conveniente? También es muy fácil de usar. Se lo recomiendo a mis amigos aquí, espero que sea útil para todos