Deixe -me mostrar o efeito exibir a imagem primeiro
A seguir, o código detalhado:
A cópia do código é a seguinte:
função lgy_picswitch (opção) {
this.owrap = this.getId (option.wrapid); // O elemento mais 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'). comprimento; // Número total de fotos
this.NScollCount = Option.ScrollCount; // o número de rolos por tempo
this.nsscolllen = math.ceil (this.nlen/option.ScrollCount); // Alterar o valor máximo do julgamento
this.nswitchwidth = 0; // A distância movida toda vez que você troca e obtenha o valor dinamicamente no código
this.nindex = 0; // Alterar o índice atual da imagem
this.timer = null; // Mudar o valor da citação da imagem
this.int ();
}
Lgy_picswitch.prototype = {
getId: function (id) {
retornar document.getElementById (id);
},
getNodeByClassName: function (pai, className) {
var classElements = new Array ();
var els = parent.getElementsByTagName ('*');
var elslen = els.Length;
var padrão = new regexp ("(^| // s)"+className+"(// s | $)");
for (i = 0, j = 0; i <elslen; i ++) {
if (padrony.test (els [i] .className)) {
ClassElements [j] = els [i];
j ++;
}
}
retorno astlements;
},
getcss: function (nó, valor)
{
Return Node.CurrentStyle? Node.CurrentStyle [Value]: GetComputedStyle (nó, nulo) [Value];
},
setcss: function (nó, val) {
para (var V em val) {
node.style.csStext += ';' +v +':' +val [v];
}
},
Movefn: function (nó, valor, TargetValue, retorno de chamada) {
var _That = this;
ClearInterval (this.timer);
this.timer = setInterval (function ()
{
var val = parsefloat (_that.getcss (nó, valor));
var velocidade = (TargetValue- val)/8;
velocidade = velocidade> 0? math.ceil (velocidade): math.floor (velocidade);
if (speed == 0)
{
ClearInterval (_That.timer);
retorno de chamada e retorno de chamada ();
}
outro
{
node.style [valor] = (val + speed) + '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.nsscolllen-1)) this.setcss (this.obtnNext, {'display': 'none'});
},
btnPrev: function () {
var _That = this;
this.obtnprev.onClick = function (e) {
var e = e || Window.Event;
_athat.cancelbubble (e);
if (_athat.nindex! = 0) {
_athat.nindex--;
_athat.picchange ();
_athat.btnisshow ();
}
}
},
btnNext: function () {
var _That = this;
this.obtnNext.OnClick = function (e) {
var e = e || Window.Event;
_athat.cancelbubble (e);
if (_athat.nindex! = (_athat.nsscolllen-1)) {
_that.nindex ++;
_athat.picchange ();
_athat.btnisshow ();
}
}
},
int: function () {
// obtenha dinamicamente a largura do movimento
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.nsscollCount;
// Botão Exibir inicialização
this.btnisshow ();
// Mudar para a esquerda e direita
this.btnprev ();
this.btnNext ();
}
}
Código HTML:
A cópia do código é a seguinte:
/*
* A estrutura HTML deve ser a seguinte: Nome do ID externo, passe -o como segue: id = "gy_picswitch02", nome de identidade, dê a você casualmente
No entanto, a estrutura interna deve ser a mesma, incluindo o nome da classe
<div id = "gy_picswitch02">
<span> </span>
<span> </span>
<div>
<ul>
<li> <img src = "imagens/pic01.jpg"> </li>
<li> <img src = "imagens/pic02.jpg"> </li>
<li> <img src = "imagens/pic03.jpg"> </li>
<li> <img src = "imagens/pic04.jpg"> </li>
<li> <img src = "imagens/pic05.jpg"> </li>
<li> <img src = "imagens/pic06.jpg"> </li>
<li> <img src = "imagens/pic07.jpg"> </li>
<li> <img src = "imagens/pic08.jpg"> </li>
</ul>
</div>
</div>
Parâmetros: 'wrapid': 'xxxx', o nome mais externo de identificação
'ScrollCount': 5, o número de rolos
A cópia do código é a seguinte:
*
*/
// Instanciação
novo lgy_picswitch ({'wrapid': 'gy_picswitch', 'scrollcount': 5});
É uma função muito conveniente? Também é muito fácil de usar. Eu recomendo para meus amigos aqui, espero que seja útil para todos